关于vue里父子组件与非父子组件间的传值

最新推荐文章于 2025-08-06 16:42:26 发布

转载最新推荐文章于 2025-08-06 16:42:26 发布 · 64 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zyh-code/p/10640972.html

文章标签：

#javascript #ViewUI

本文详细介绍了Vue中父子组件及非父子组件之间的通信方式。包括父组件通过props向子组件传递数据，子组件使用$emit向父组件发送事件携带数据，以及非父子组件通过事件总线实现数据交互的方法。

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

vue里父子组件与非父子组件间的传值还是很重要的，刚开始也是看着别人写的博客学习的，下面是自己学后的总结

1，父组件向子组件传值，通props

//父组件
<template>
     <div>
　　　　　　<title>这是父组件</title>
    　　　　<div>父组件里的内容区域</div>
　　　　　　<child :parentMsg>这是引用的子组件</child>

    </div>
</template>
data:{
    parentMsg:"这是父组件里的值"，

}

//子组件

<template>
     <div>
　　　　　　<title>这是子组件</title>
    　　　　<div>子组件里的内容区域
　　　　　　　　<p>{{parentMsg}}</p>
　　　　　　</div>
　　　　　　
    </div>
</template>

data:{
    props:{
       parentMsg:"",
        default:"String",//要传类型
   }
｝

2.子组件向父组件传值--->$emit

//父组件
<template>
     <div>
　　　　　　<title>这是父组件</title>
    　　　　<div>父组件里的内容区域{{fromChildMsg}}</div>
　　　　　　<child ：fromChild='childMsg'>这是引用的子组件</child>

    </div>
</template>
data:{
    fromChildMsg:"",
},
methods(){
    childMsg(val){
　　　　　　//val就是子组件传来的值，
        this.fromChildMsg=val;
    }
}
//子组件

<template>
     <div>
　　　　　　<title>这是子组件</title>
    　　　　<div @click="toParent">子组件里的内容区域</div>
　　　　　　
    </div>
</template>

methods(){

   toParent(){
      this.$emit("fromChild","这里是要传给父组件的值");
   }

}

3，非父子组件间的传值
    非父子组件间的传值需有一个共同的实，可在main.js里导出一个vue实例，也可新那一个文件，在里面引入vue，创建一个vue实例，然后导出，然后要用到$on监听
下面说具体说下
  先说在main.js里的写法
export var bus = new Vue();
然后在要用的组件里导入
import bus from '/main.js'
//将要传递的数据以名子a发送
bus.$emit("a","132456");
//以名字a来接收传来的值
bus.$on("a",function(val){
   val就是传过来的值
});　　

//新建一个文件也这个一样，
// 在assets里 新建一个eventBus.js
在这个js里引入Vue，并创建实例
import vue from 'Vue'

export new Vue();
在要用的给组件里引入这个JS；

后面的操作和上面一样了
import eventBus form 'eventBus'
eventBus.$emit("a","234243");
eventBus.$on("a",function(val){
     val就是传来的值
})