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