vue 组件通信

父子通信

父传子

父组件 <app-child :productData="productData"> </app-child>

子组件  props: { productData:{} }

子传父

子组件 this.$emit('zdysjm',zhi)

父组件 <app-child @zdysjm="hsm"> </app-child>

        hsm(data){console.log(data,'接收的值')}

兄弟传参

先创建 index.js

import Vue from "vue"
const Bus=new Vue()
export default Bus

import Bus from '../bus'

export default{
   data(){
     return{
        num:0
       },
   },
   save() {
     Bus.$emit('massage', this.num);
            //  发送的事件 ， 传递的参数 
  }, 
}

import Bus from '../bus';
export default{
   data(){
     return{
        num:0
       },
   },
   created() {
     Bus.$on('massage', data => {
      this.num= data
    })
  },
}

跨组件通信(爷孙组件传递数据)

provide(){//以对象的形式传递
    return {
        massage:this.massage;//传递的值
   }
}
//------------
inject: ["massage"],