Vue_2 组件之间的通信

组件的中的传参

知识点

• 组件Component
  • 定义
    • 全局组件：Vue.component(name,options) 类似于new Vue(options)
    • 局部组件：components
  • 使用
    • 定义组件其实就是自定义一个标签（符合W3C标准）
  • 组件通讯

    原则：谁的数据谁修改

    • 父 -> 子：props

      1. 在子组件上定义属性，并传递数据
      2. 在子组件中通过props配置参数接收数据

      接收到的数据会自动称为子组件的属性

    • 子 -> 父：自定义事件来实现

      1. 在子组件上定义一个事件v-on:additem
      2. 在子组件内部触发这个自定义事件：$emit()

    • 兄弟 -> 兄弟

      1. 兄弟 -> 父组件
      2. 父组件 -> 兄弟

    • 多层级组件通讯

      • 逐层传递（繁琐，不靠谱）

      • 事件总线Bus

        1. 自定义事件

           接收方自定义事件

        2. 触发自定义事件

           发送方触发自定义事件

      任何Vue的实例都可以自定义事件触发 事件，一个组件其实就是一个Vue的实例
      * 定义事件：vm.$on(‘abc’)

        * 触发事件：vm.$emit('abc',100)