Vue的组件化

1. 什么是组件：

组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

2.组件化和模块化的不同：

• 模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
• 组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

3. 如何定义组件

使用Vue.extend创建全局组件

 <div id="app">
        <my-component></my-component>
    </div>

// 1.使用extend定义了组件,里面的参数是一个对象里面有个属性template，这个属性就用来放模板字符串
// 2.返回一个值
		var com1 = Vue.extend({
          template:'<h1>通过extend方式定义的组件</h1>'
      })
      // 把这个组件注册到Vue里面，第一个参数是组件的名字，第二个参数是extend方法的返回值
      // 命名需要注意的地方，注册组件的时候，命名可以大写，但是使用的时候都需要改为-连接
      Vue.component('myComponent',com1)

直接使用Vue.component方法

 <div id="app">
       <my-com></my-com>
   </div>

Vue.component('myCom',{
         template:'<h1>直接使用component定义的组件</h1>'
     })

将模板字符串放在template中

 <div id="app">
      <new-com></new-com>
  </div>
  <template id="newCom">
      <h1>将模板字符串放在template中</h1>
  </template>

    Vue.component('newCom',{
           template:"#newCom"
       })

定义私有组件

	<div id="app">
        <private-componenet></private-componenet>
    </div>
    <template id="myComponent">
        <h1>这是自定义的私有组件</h1>
    </template>

     var vm = new Vue({
            el: "#app",
            components: {   //注意加s
                'private-componenet': {
                    template: "#myComponent"
                }
            }
        })

4.组件的data

• 必须是一个方法
  每次使用组件会调用这个方法，返回的是一个新的对象，这样就能保证每个组件的data是独立的
  如果直接使用对象的化，我们每次使用组件都是使用的同一个对象，这样就导致我们多次引用组件的话
• 必须返回一个对象

 Vue.component('my-component', {
            template:"#myComponent",
            data:function(){
                 // 组件的data必须是一个函数，必须返回一个对象，这个对象其实就是我们之前定义data
                return {
                    msg:"这是一个组件data属性"
                }
            }
        })

5.不同组件的切换

• 使用v-show进行切换
  设一个标志，切换时候改变它的true或false
• 使用vue提供的标签
  <component :is='组件的名称'></component>

6.组件切换动画

设置mode属性

• out-in 先出在进
• in-out 先进再出
  如<transition mode='out-in'>

7. 子组件接受父组件传值

1. 使用props属性来定义父组件传递过来的数据
   props: ['parentMsg', 'list']
2. 使用v-bind或简化指令:，将数据传递到子组件中
   <son :parent-msg='msg' :list='list'></son>
3. 设置传递类型

props: {
      // 规定了父组件只能传对象类型
      prop1:Object
    // 可以设置多个类型，可以传Number也可以传String
    parentMsg: [Number, String],
    list: {
            // 设置类型
      type: Array,// [Array,String]
      // 设置默认值的时候必须使用函数，原理和data必须使用函数是一样的
      default: function () {
          return [{
            name: '这个一个默认的名字'
          }]
      }
    },
}

4. 属性的继承和传递

• 属性继承的特征：
  父组件的属性会覆盖子组件的属性
  但class 和 style 会进行合并，不会覆盖
• 设置禁用继承
  加在子组件上的属性，使用了这个属性之后会阻止组件继承父组件的属性，但是class和style除外
  inheritAttrs: false
• 在组件内可以使用$attrs获取父组件传过来的属性

5. data和props的区别
   data是组件私有的，props是父组件传过来的
   data是可以修改的，props是只读的

8.子组件设置自定义的方法

1. 子组件调用父组件的方法
   在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的）
   子组件可以触发这个事件$emit('事件名字')
2. 子组件给父组件传递数据
   $emit方法第二个参数可以定义子组件给父组件传递的内容
   父组件这个方法没有自定参数，在父组件的方法直接加这个参数就可以拿到
   父组件有自定义参数，可以传入$event也可以拿到子组件传递的数据。通过$event只能传递第一个参数。

9.ref的使用

1. 获取dom节点
   给dom节点记上ref属性，可以理解为给dom节点起了个名字。
   <h1 ref = 'myh1'>h1标签内容</h1>
   加上ref之后，在$refs属性中多了这个元素的引用。
   通过vue实例的$refs属性拿到这个dom元素。
   console.log(this.$refs.myh1.innerText);
2. 获取组件
   给组件记上ref属性，可以理解为给组件起了个名字。
   <my-comp ref='mycomp'></my-comp>
   加上ref之后，在$refs属性中多了这个组件的引用。
   通过vue实例的$refs属性拿到这个组件的引用，之后可以通过这个引用调用子组件的方法，或者获取子组件的数据。
   console.log(this.$refs.mycomp.msg);