Vue中的组件通信的用法（个人理解笔记）

一 先要找到组件关系(Vue 是通过改变数据来改变相应的元素的，所以我们不管改变谁都要经过数据，通过数据来改变相应的元素)
归根到底就是围绕数据做的一些活动

二 根据组件关系来选择通信方法
  1 父子通信
    a) 在子组件中添加props属性例子
      {
        props: ['自定义prop名字(1)'] //意思是打开一个接口让父元素给其传值（父元素给子元素传值）
      }

例子：

 

     props:{

             nums:Number

       }

    b) 在子组件模板中直接使用prop（像使用data一样）例如：({{'自定义prop名字(1)'}})
    c) 在父组件的组件模板中找到子组件标签，添加属性 
      <子组件标签 :自定义prop名字(1)="父组件data中的值(是前面for循环遍历的数据，就如同(comment定义的data值 in comments数据))"></子组件标签>

  2 子父通信
    a) 在子组件中找到对应的元素添加相关事件就是添加点击或者其他事件例如(@click=send这是函数名)，在事件函数中触发这个已经定义好的自定义事件
      {
        methods: {
          函数名 () {
            this.$emit('自定义事件名(2)', 数据(就是把子元素上的值拷贝付给一个对象Object.assign({},this.comment)))
          }
        }
      }

     孩子传值，父亲来接收$emit是发出数据的意思

    b) 在父组件methods中添加函数
      {
        methods: {
          函数(3) (data) {
            // data就是$emit传来的数据
            把子元素$emit传来的数据拷贝到父元素上
            例如：this.comments(这是传来的数据).splice(index,1)做删除事件
          }
        }
      }

    c) 在父组件组件模板中找到子组件标签添加自定义事件

    <子组件标签 @自定义事件名(2)这是子元素上的函数名="父组件中的函数名(3)"></子组件标签>

    先是子元素上的函数名，再是父元素上的函数名，就是为了让子元素与父元素产生关联，就是让子元素上的函数来触发父元素上的事件

     

  3 非父子通信
    a) 创建一个公共的实例 （选一个即可）
      const bus = new Vue()
      const EventHub = new Vue()
    b) 在发送数据的组件中对应的元素上添加事件
      @click="函数名(5)"  // 函数中触发自定义事件
      {
        methods: {
          函数名5() {
            bus.$emit('自定义事件名(4)', 数据(例如:Object.assign({},this.comment))
          }
        }
      }
    c) 在接收数据的组件中添加created，然后监听事件的触发
      created () {
        bus.$on('自定义事件名(4)', (data) => {
          // data就是传来的数据
        })
      }
    
三 结束

  想要修改那个组件中的data，就在哪个组件中设置$on() 监听即可