前端扯犊子之六Vue2（二）组件

一、组件

个人理解：为了复用代码而进行封装代码，以及封装代码块之间的通信

1、全局组件

注：(1)、table标签内只允许tr、td等，组件受限，可用is挂载。
如：tbody is="my-component"
(2)、组件内data必须是函数

2、局部组件

3、组件间通信

父组件——>子组件

（1）、Props

props 是子组件用来接受父组件传递过来的数据的一个自定义属性。

（2）、动态 Prop

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件
注：对于父组件的值，可以再声明一个数据，进行赋值，避免直接操作原始数值。

（3）、Props 验证

组件可以为 props 指定验证要求。

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

子组件——>父组件

父组件使用 emit(eventName) 触发事件
如果在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on

data 必须是一个函数，如果 data 是一个对象则会影响到其他实例。
组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。

//等价于：

非父子组件通信：兄弟组件、跨多级组件

（1）、中央事件总线(bus)处理任何组件通信

首先创建了一个名为bus的空Vue实例，里面没有任何内容；然后全局定义了组件component-a;最后创建Vue实例app，在app初始化时，也就是在生命周期mounted钩子函数里监听了来自bus的事件on-message，而在组件component-a中，点击按钮会通过bus把事件on-message发出去，此时app就会接收来自bus的事件，进而在回调函数里完成自己的业务逻辑。

（2）、父链、子链

父链
在子组件中，使用this.children访问它所有的子组件，而且可以递归向上或向下无限访问，直到根实例或最内层的组件。

    

        {{ message }}