Vue组件间通信的5种方式

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

Vue.component('Child', {
  props: ["message"],
  data() {
    return {}
  },
  template: "
    

  ",
  }
  mounted() {
    console.log(this.message); // 父组件的数据
  }
})
Vue.component('Parent', {
  data() {
    return {
        msg: '父组件的数据'
    }
  },
  template: "
    

      
    
"
})

1.2 子组件向父组件传值

Vue.component('Child', {
  data() {
    return {
        childData: "子组件数据"
    }
  },
  template: "
    

      按钮
    
  ",
  methods: {
    sendMsgToParent() {
      this.$emit("sendMsg", this.childData)
  }
})
Vue.component('Parent', {
  data() {
    return {}
  },
  template: "
    

      
    
",
methods: {
    getData(val) {
      console.log(val); // 子组件数据
    }

}
})

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

Vue.component('D', {
  data() {
    return {
      msg: 'd的数据'
    }
  },
  template: "
    

      {{$attrs.dataA}}
    
   ",
    methods: {
      sendData() {
        this.$emit("showDData", this.msg)
       }
    }
})
Vue.component('C', {
  data() {
    return {}
  },
  template: "
    

      
    
",
})
Vue.component('B', {
  data() {
    return {}
  },
  props: ['dataA']
  template: "
    

      
    
",
})
Vue.component('A', {
  data() {
    return {
        msg: 'A的数据'
    }
  },
  template: "
    

      
    

  ",
  methods: {
    getDData(val) {
      console.log(val) // d的数据
    }
  }
})
//总结一下, 第二种方式传递参数,第一步和第一种方式相同,剩下的中间组件就绑定固定的形式的属性或者方法就可以.

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

var bus = new Vue();
Vue.component('A1', {
    data() {
        return: {
            dataA1: 'A1的数据'
        }
      },
      template: "
        
点击传递
      ",
      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: "
      

        
        
      
    "
})

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

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

          
      
    "
    mounted() {
      
    }
})
Vue.component('A', {
    data() {},
    provide: {
        parentData: '父组件数据'
    }
    template: "
      

        
      
    "
})

5,children

Vue.component('A1', {
    data() {},
    props: {
        value: string
    }
    template: "
      

        子组件按钮
      
    ",
    methods: {
        getAData() {
            console.log(this.msg) // HELLO
            this.$parent.myMsg = "1234567"; // 这样的话会改变父组件中myMsg的值
        }
    }
})
Vue.component('A', {
    data() {},
    template: "
      

        
        父组件按钮
      
    ",
    methods: {
        chanageA1Value() {
            this.$children[0].msg = "HELLO"
        }
    }
})

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