Vue组件间通信的5种方式

1,$emit和props (父子组件间传参,且嵌套层级少)
现有parent组件和child组件
1.1 父组件向子组件传值

Vue.component('Child', {
  props: ["message"],
  data() {
    return {}
  },
  template: "
    <div></div>
  ",
  }
  mounted() {
    console.log(this.message); // 父组件的数据
  }
})
Vue.component('Parent', {
  data() {
    return {
        msg: '父组件的数据'
    }
  },
  template: "
    <div>
      <Child :message='msg' />
    </div>
"
})

1.2 子组件向父组件传值

Vue.component('Child', {
  data() {
    return {
        childData: "子组件数据"
    }
  },
  template: "
    <div>
      <button @click="sendMsgToParent">按钮</button>
    </div>
  ",
  methods: {
    sendMsgToParent() {
      this.$emit("sendMsg", this.childData)
  }
})
Vue.component('Parent', {
  data() {
    return {}
  },
  template: "
    <div>
      <Child @sendMsg="getData" />
    </div>
",
methods: {
    getData(val) {
      console.log(val); // 子组件数据
    }

}
})

2 listeners(从vue2.4开始.解决多层嵌套,且不用多次命名)

Vue.component('D', {
  data() {
    return {
      msg: 'd的数据'
    }
  },
  template: "
    <div>
      <button @click="sendData">{{$attrs.dataA}}</button>
    </div>
   ",
    methods: {
      sendData() {
        this.$emit("showDData", this.msg)
       }
    }
})
Vue.component('C', {
  data() {
    return {}
  },
  template: "
    <div>
      <D  v-bind="$attrs" v-on="$listeners" />
    </div>
",
})
Vue.component('B', {
  data() {
    return {}
  },
  props: ['dataA']
  template: "
    <div>
      <C v-bind="$attrs" v-on="$listeners" />
    </div>
",
})
Vue.component('A', {
  data() {
    return {
        msg: 'A的数据'
    }
  },
  template: "
    <div>
      <B :dataA="msg" v-on:showDData="getDData" />
    </div>
  ",
  methods: {
    getDData(val) {
      console.log(val) // d的数据
    }
  }
})
//总结一下, 第二种方式传递参数,第一步和第一种方式相同,剩下的中间组件就绑定固定的形式的属性或者方法就可以.

3,vue的bus对象(中央事件主线,用于解决兄弟组件间相互通信)

var bus = new Vue();
Vue.component('A1', {
    data() {
        return: {
            dataA1: 'A1的数据'
        }
      },
      template: "
        <div @click='sendToA2'>点击传递</div>
      ",
      methods: {
          sendToA2() {
              bus.$emit('globalEvent', this.dataA1)  // 注: 一定是bus.
           }
      }
})
Vue.component('A2', {
    data() {
        return: {}
    },
    mounted() {
      bus.$on('globalEvent', (val)=> {  // 注: 一定是bus.
        console.log(val); // A1的数据
      })
    }
})
Vue.component('A', {
    data() {},
    template: "
      <div>
        <A1 />
        <A2 />
      </div>
    "
})

4, provide(父组件提供变量)和inject(子组件接收变量)

Vue.component('A1', {
    data() {
        return: {}
    },
    inject: ['parentData'],
    mounted() {
      console.log(this.parentData); // 父组件数据
    }
    template: "<div>2333</div>"
})
Vue.component('A2', {
    data() {
        return: {}
    },
    template: "
      <div>
          <A1 />
      </div>
    "
    mounted() {
      
    }
})
Vue.component('A', {
    data() {},
    provide: {
        parentData: '父组件数据'
    }
    template: "
      <div>
        <A2 />
      </div>
    "
})

5,children

Vue.component('A1', {
    data() {},
    props: {
        value: string
    }
    template: "
      <div>
        <button @click="getAData">子组件按钮</button>
      </div>
    ",
    methods: {
        getAData() {
            console.log(this.msg) // HELLO
            this.$parent.myMsg = "1234567"; // 这样的话会改变父组件中myMsg的值
        }
    }
})
Vue.component('A', {
    data() {},
    template: "
      <div>
        <A1 />
        <button @click='chanageA1Value'>父组件按钮</button>
      </div>
    ",
    methods: {
        chanageA1Value() {
            this.$children[0].msg = "HELLO"
        }
    }
})

其实还有一种是vuex....