【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">&l