Vue学习笔记—组件机制

一、组件机制

1.组件定义

组件是可复用的Vue实例，所以可以接收与Vue相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。不同之处在于vue实例内部的el属性指定模板，而组件则是其内部的template属性指定模板

对于组件的定义中，要注意的是：一个组件的data选项必须是一个函数，便于每个实例可以维护一份被返回对象的独立拷贝，从而保证复用的组件内部的数据不会相互影响

2.组件定义

组件进行使用前需先注册，注册分为全局注册和局部注册，类似于js中的全局变量和局部变量

（1）全局注册

全局注册使用的是Vue.component来创建组件，注册之后可以用在任意Vue实例或者组件内部使用

全局注册的语法：

Vue.component('注册组件时的组件名', options)

（2）局部注册

Vue中有一个webpack静态模块打包机制，全局注册所有的组件就相当于若不再使用一个组件但仍会被包含在最终的构建系统中，会造成用户下载的 JavaScript 的无谓的增加。因此，这里就需要使用局部组件，在当前注册的实例或者组件内部使用

如果一个组件在一个实例或者组件内部被多次调用，用局部注册较好

一个组件也可以被另一个组件使用，写法是：

定义好使用组件和被使用组件

在使用组件内部的components属性中写入一个键值对，左侧为组件名，冒号右侧为被使用组件的名称，例

二、组件交互

组件交互就是组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事情告知父组件。

在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop属性 给子组件下发数据，子组件通过事件函数给父组件发送消息

 1.父组件向子组件传参，子组件接收参数

父组件使用属性绑定的方式将参数传递给子组件，子组件通过props声明期望从父组件那里获取的参数。

上图可以看出第一块蓝色区域是父组件向子组件传递参数，第二块蓝色区域表示的是子组件接收父组件传递过来的参数。我们还能看到传递的参数有的有冒号，有的没有，这块属于动态传参，传递的参数分两种情况：

（1）没有“：”：传递的是常量字符串，控制台上显示为黑色

（2）有“：”：表示的是传递的为boolean、number、对象、数组、变量，控制台上显示为其他颜色

props验证：我们可以为组件的prop指定验证要求，若有一个需求没有被满足，控制台会警告

那么就需要为props里的属性添加验证，验证的内容有：

（1）type: String,     // 验证数据类型

（2）required: true,   // 该参数必需传递的参数，有这个属性时，默认值不存在

// 基本数据类型直接写在default后面

（3）default: '你好',  //  当前参数的默认值

// 引用数据类型,使用工厂函数的形式返回一个对象或者数组

（4）default() {

       return { }

     }

 （5）validator(val) {  // 自定义的验证器

         return val.length > 3

     }

2.子组件向父组件传参

子组件是通过this.$emit()的方式将值传递给父组件，括号内有两个参数，第一个参数是父组件指定的传数据绑定的函数，第二个参数是子组件给父组件传递的数据

父组件接收子组件发送过来的数据

其绑定的函数为this.$emit()的方式中的第一个参数，然后为其添加事件处理函数，这个定义在Vue实例的方法中

methods: {
   fatherHandler(val) {
   // val就是子组件发送事件时，携带的参数this.comMsg
   this.fatherDate = val
     }
},

当点击发送数据按钮，控制台就会输出子组件传过来的参数

最后我们再来了解一下单向数据流：

父级的prop数据的更新，会向下流动到子组件中，反过来不行

父组件能够修改子组件中的数据，而子组件不能直接修改父组件中的数据

作用：防止子组件意外变更状态，会影响父组件中的状态或者数据