【VUE】vue组件之间通信有几种方式

vue组件之间通信可分为以下几种

• props和$emit(也就是常说的父子组件通信，常用)
• $attrs和$listeners
• 中央事件总线（非父子组件间通信）
• v-model
• provide和inject
• $parent和$children
• vuex

 1.props和$emit(常用)

Vue.component('child',{
    data(){
      return {
        mymessage:this.message
      }
    },
    template:`
      <div>
        <input type="text" v-model="mymessage" @input="passData(mymessage)"> </div>
    `,
    props:['message'],//设置props属性值，得到父组件传递过来的数据
    methods:{
      passData(val){
        //触发父组件中的事件，向父组件传值
        this.$emit('getChildData',val)
      }
    }
  })
  Vue.component('parent',{
    template:`
      <div>
        <p>this is parent compoent!</p>
        <child :message="message" v-on:getChildData="getChildData"></child>
      </div>
    `,
    data(){
      return {
        message:'hello'
      }
    },
    methods:{
      //执行子组件触发的事件
      getChildData(val){
        console.log(val)
      }
    }
  })

 在上面的例子中，有父组件parent和子组件child。

　　1).父组件传递了message数据给子组件，并且通过v-on绑定了一个getChildData事件来监听子组件的触发事件；

　　2).子组件通过props得到相关的message数据,最后通过this.$emit触发了getChildData事件

2.$attrs和$listeners

Vue.component('C',{
    template:`
      <div>
        <input type="text" v-model="$attrs.messagec" @input="passCData($attrs.messagec