vue中父子组件之间的通信

父组件对子组件通信：

　　在父组件中：　

　　　　<CreatePlan :dialogVisible="dialogVisible"></CreatePlan>

　　　　以自定义属性（dialogVisible）的方式，由父向子通信

 

　　在子组件中：

 

　　　　接受方式：

　　　　　　　　1、props:["dialogVisible"],

　　　　　　　　2、props:{

　　　　　　　　　　　　"dialogLearning":{

　　　　　　　　　　　　　　type:Boolean,

　　　　　　　　　　　　　　default:false,

　　　　　　　　　　　　}

　　　　　　　　　　},

 

子组件对父组件通信：

 

　　在父组件中：　

　　　　

　　　　<CreatePlan :dialogVisible="dialogVisible"@my-event="emitMyEvent"></CreatePlan>

 

　　　　接受方式：以自定义方法（my-event）的方式，接受子向父传递过来的值

　　　　　　　　// 接受子组件传递的过来的参数

　　　　　　　　methods: {

　　　　　　　　　　emitMyEvent(val){

　　　　　　　　　　　　this.dialogVisible=val;//控制弹框的显示隐藏状态

　　　　　　　　　　},

　　　　　　　　},

 

　　在子组件中：

 

　　　　传递：以自定义的方法（my-event）的方式，传递给父组件

 

　　　　// 子组件对父组件传值方法-----控制选择学习对象的显示与隐藏效果

　　　　isShowFn(){

　　　　　　this.$emit("my-event",false)

　　　　},

 

 

非父子组件的通信：

　　1、vuex

　　2、通过这个公共的原型属性，

　　　　在main.js文件中　　　　

　　　　　　Vue.prototype.$bus=new Vue;

 

　　传递用：this.$bus.$emit("my-event",false);

　　接受用：this.$bus.$on("my-event",(val)=>{

　　　　　　　　console.log(val)

　　　　　　})

转载于:https://www.cnblogs.com/dongyuezhuang/p/11434737.html