Vue组件化开发

组件化开发

组件用于封装页面的部分功能，将功能的结构、样式、逻辑代码封装起来，提高功能否对复用性和可维护性，更专注业务逻辑的开发。

组件注册

组件本质上时可复用的Vue实例，可以与new Vue接收相同的选项，例如data、methods以及生命周期钩子等。

命名规则：用 - 连接或者pascalCase命名法
调用规则：必须使用 - 连接，标签内部不区分大小写

全局注册

可以用于任意实例或组件中,必须创建于根Vue实例创建之前 Vue.component('组件名',{选项对象})

  <div id="app">
   <my-component></my-component> 
  </div>
  <script>
	Vue.component('my-component',{
     
		template:<div>全局注册组件</div>
	})
	Vue.component('MyComB',{
     
		template:
	})
	new Vue({
     
		el:'#app',
		data:{
     
		 }
	})
  </script>

组件基础

template选项

用于设置组件的结构。只能有一个根元素

<div id='#app'>
<my-complate></my-complate>
</div>
<script>
Vue.component('MyComplate',{
     	//全局注册组件
	template:'<div>组件A的内容{
     {1+9*2}}</div>'	
//	template:'<div><p>组件A</p>/div>'		//可以书写
//	template:'<div>组件</div> <div></div>'		//不可书写，只可使用一个根元素
})
new Vue({
     
	el:'#app',
	data:{
     }
})
</script>

data选项

数据绑定操作，只能将data中的数据放到方法中传入，为了使每次调用组件时不同调用位置实例相互独立。为实例设置作用域。

<div id='#app'>
	<My-COmA><My-ComA>
</div>
<script>
	Vue.component('MyComA',{
     
	 	template:'<div>{
     {
     title}}</div>
					<p>{
     {
     content}}</p>`
		data() {
     
		  return {
     
		  	title:'组件标题'
		  	content:'组件内容'
		  	}
		 }
	 })
</script>

局部注册

在实例化的Vue对象中添加components属性，将组件名以对象的方式添加到componsents属性中，data方法设置在components对象中以函数调用的形式书写

<div id = '#app'>
<my-com-a><my-com-a>
</div>
<script>
	new Vue({
     
		el:'app',
		data:{
     }
		components:{
     
		 	'my-com-a':{
     
		 	template:`<div><h3>{
      {title}}</h3><p>{
      {content}}</p></div>`,
			data(){
     
				return{
     title:'组件标题',
					   content:'组件内容'
					   }
				}
			}
		 } 
	})
</script>

可以将数据提取出来单独设置选项对象，结合ES6新语法设置对象属性和对象值相同书写一个即可

<div id = '#app'>

</div>
<script>
	var MyComponentA = {
     
      template: `
        <div>
          <h3>{
      { title }}</h3>
          <p>{
      { content }}</p>
        </div>
      `,
      data () {
     
        return {
     
          title: '组件 A 标题',
          content: '组件 A 内容'
        }
      }
    };
	var componentB = ({
     
	  template:` <div>
          <h3>{
      { title }}</h3>
          <p>{
      { content }}</p>
        </div>
      `,
      data () {
     
        return {
     
          title: '组件 B',
          content: '组件 B 内容'
        }
      }
	 })
	new Vue({
     
	 	el:'#app'
	 	data(){
     
	 	}
	 	comonents:{
     
	 	 'my-component-a':componentA,
	 	 compontentB
	 	 }
	 })
</script>

组件通信

父组件向子组件传参值

父组件给子组件传值过程中用到props属性，采用驼峰命名法 ，父组件绑定时使用 - 连接，标签中不区分大小写无法识别props。不要与data存在同名属性。引用data中的值时无需将data设置为方法

<div id="app">
    <!-- 静态属性设置 -->
    <my-component-a  my-title="这是静态的标题" my-content="这是静态的内容"></my-component-a>
    <!-- 动态属性绑定 -->
    <my-component-a v-bind:my-title="'这是静态的标题，这是演示'" :my-content="'这是静态内容'"></my-component-a>
    <!-- 动态属性绑定：常用操作 -->
    <my-component-a :my-title="item.title":my-content="item.content" ></my-component-a>
  </div>
  <script>
    // 创建子组件
    Vue.component('my-component-a', {
      props: ['myTitle', 'myContent'],
      template: `
        <div>
          <h3>{
  { myTitle }}</h3>
          <p>{
  { myContent }}</p>
        </div>
      `
    });
    new Vue({
      el: '#app',
      data: {
        item: {
          title: '这是示例标题',
          content: '这是示例内容'
        }
      }
    });

所有的prop属性都是单向下行绑定的。父组件可以传给子组件中时父组件的变化可以更新到子组件，但子组件的变化不会被父组件更新，如果子组件需要更改处理父组件传入的数据 ，应存到data中。父组件给子组件传入的时一个对象时，子组件更新后父组件也会被修改。父组件给子组件传值是使用prop方式的同时，还需要绑定要传输的数据

<div id="app">