20200506 Vue组件 组件通信

组件关系可分为：父子组件通信，兄弟组件通信，跨级组件通信

自定义事件---子组件给父组件传递数据

使用v-on 除了监听 DOM 事件之外，还可以用于组件之间的自定义事件。
子组件使用 $emit() 来 触发事件，父组件使用 $on() 来监听子组件事件

第一步：自定义事件
第二步：在子组件中使用$emit 触发事件，第一个参数是要触发的事件名，后面的参数是要传递的数据
第三步：在自定义事件中用一个参数来接收

    

        你的银行卡余额是：{{total}}
        
        
    


    

---

非父子关系组件之间的通信 --- 父链---子链

有时候两个非父子关系的组件也需要通信，在简单的场景下，可以使用一个空的 vue 实例作为中央事件总线（中介）：

let bus = new Vue()
//bus 为自定义名称，非固定写法

//触发组件 a 中的事件：
bus.$emit('a-component',1)

//在组件 b 创建的钩子函数中监听事件
bus.$on('a-component',function(id){
   //......
 })

从组件a向组件b中传递数据，首先要在根组件中定义一个 bus 中介
在a组件中通过 this.$root.bus 拿到根组件中的 bus 中介，再通过this.$root.bus.$emit('lala',this.aaa)去触发一个事件,并传递一个数据。
然后在 b 组件中，通过钩子函数 created 在a组件创建的时候就通过this.$root.bus.$on('lala',function(value){}) 去监听这个lala事件

---

父链、子链

父链：this.$parent

Vue.component('a-component', {
  template: '通过点击我修改父组件的数据',
  methods: {
      setFatherData() {
          //拿到父组件中的 msg ，对其进行修改
          this.$parent.msg = '数据已经修改了'
       }
  })


//父链的父链就是 this.$parent.$parent

子链：this.$children
提供了为子组件提供索引的方法，用特殊的属性ref为其增加一个索引

   
   
   
   ---{{formChild}}
   我是父组件的按钮，点击我拿到子组件的内容