Vue组件通信

组件通信

1. 为什么要进行组件通信？
   组件可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起时，这些组件相互之间要建立联系
   ，这个联系我们就称之为通信
2. 组件通信的方式有以下几种（ 王者级 ）
   1. 父子组件通信
      使用props来实现
   2. 子父组件通信
      自定义事件

           自定义事件
                1. 自定义的   通过  $on  定义    $emit触发
                2. 通过绑定在组件身上定义，通过 $emit触发
                
            子父通信流程
                1. 在父组件的模板中，通过事件绑定的形式，绑定一个自定义事件在子组件身上
      
                    <Son @aa = "fn"/>       //这边要注意： fn是要在父组件配置项methods中定义
      
                2. 在子组件的配置项methods中写一个事件处理程序，在事件处理程序中触发父组件绑定的自定义事件
      
                  Vue.component('Son',{
                    template: '#son',
                    data () {
                      return {
                        hongbao: 500
                      }
                    },
                    methods: {
                      giveFather () {
                        //如何进行父组件给子组件的自定义事件触发
                        this.$emit('give',this.hongbao)
                      }
                    }
                  })
      
                3. 将子组件定义的事件处理程序  giveFather,绑定在子组件的按钮身上
                   <template id="son">
                      <div>
                        <button @click = "giveFather"> give </button>
                        <h3> 这里是son组件 </h3>
                      </div>
                    </template>
      

3. 非父子组件通信
   ref链: 可以实现非父子组件的通信，但是如果层级太多，就比较繁琐了 $attrs
   bus事件总线
4. 多组件状态共享（ 多个组件共用同一个数据 ） 大知识点（ vuex ）
   vuex

接下来的几种方式是非常规手段，是你不得已才使用的，砸门是不推荐的

app实例的手动挂载

  new Vue({
    
  }).$mount('#app')

自定义事件

1. 自定义的 通过 $on 定义 $emit触发

      var vm = new Vue({
      el: '#app'
      })
   
      // 自定义事件的定义（ 发布 ）
   
      // vm.$on(自定义事件的名称，自定义事件的事件处理程序)
   
      vm.$on( 'aa', function () {
      console.log( 'aa' )
      })
   
      //自定义事件的触发 （ 订阅 ）
   
      // vm.$emit( 自定义事件的名称，自定义事件处理程序需要的参数1，参数2，参数3)
   
      vm.$emit( 'aa' )
   

2. 通过绑定在组件身上定义，通过 $emit触发
   <Son @aa = “fn”/>

   使用： 子父通信

组件的根元素必须有且仅有一个