vue常用的父子组件通信，非父子组件通信_ⅴue 什么情况下用父子关系组件?-优快云博客

本文详细介绍了Vue.js中不同组件间的通信方式，包括父组件触发子组件方法改变其状态、子组件通过$emit调用父组件方法、子组件获取父组件的值以及非父子组件间通过共同父组件进行通信的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求1 【在父组件中触发子组件的方法改变子组件中的值，取子组件的值： ---$refs】

//父：
 <router-view ref='listCom'></router-view>
  methods: {
             fatherFn:function(){
                 this.$refs.listCom.sonFn('query');
                 this.$refs.listCom.getMutex(function(sonData){
                    console.log(sonData);
                    });
             },
  }

 //子：
  sonFn:function(flag){
                  console.log("我是子组件方法")
                 if(flag=='query'){
                     this.selectOption=0;//改变值
                 }
    },
    getMutex：function(callback){
       if(callback) callback(this.idArr)//取值
    },

这种情景属于由父组件控制触发的场景，如果控制是在子组件中，那么，这种就可以使用$emit分发，传值为$emit('getMutex',this.idArr) ；

需求2 子组件调用父组件的方法：--事件分发$emit

 //父：
<son v-on:sonFnEmit='fatherFn(false)'></son>

 fatherFn:function(){
                //逻辑
            },
//子：
  sonFn:function(){
                 this.$emit('sonFnEmit')
 },

需求3 子组件取父组件的值
通过公共的vue对象或者store来实现；

取值的话通过子组件的prop绑定就好
子组件： props:["sonlist"]

父组件 : <son v-on:sonlist="listdata"></son>
data{listdata:[]}

需求4 两个非父子组件通过共同的父组件，他们之间需要通信：

Module1Fn是子组件Module1的分发事件
Module2Fn是子组件Module2的事件；
LayoutFn是父组件的方法;

<son1 v-bind:Module1emitFn="LayoutFn"></son1>
LayoutFn:function(){
                this.$refs.listCom.Module2Fn();
},