VUE项目中的父子，兄弟组件之间的传值。

最新推荐文章于 2024-04-22 20:28:12 发布
最新推荐文章于 2024-04-22 20:28:12 发布
阅读量387 收藏
点赞数
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_38069018/article/details/118297926
版权
本文详细介绍了Vue项目中父子、兄弟组件间的传值方法，包括父传子的props、子传父的$emit、父子组件双向通信及兄弟组件间通过事件总线通信的具体实现。

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

VUE项目中的父子，兄弟组件之间的传值。

首先说一下父子组件就是在一个vue文件中引入另一个vue文件，被引入vue文件就是子组件，引入vue文件的vue文件就是父组件。而在父组件中是不能直接调用子组件中的变量值的。下面详细说一下，父子组件之间怎么传值。
·
·
·
情况一：父组件给子组件传值方法，使用props

1 组件中的 所有props 中的数据，都是通过父组件传递给子组件的
2 props 中的数据都是只读的，无法重新赋值

这是关于props具体使用：
https://www.cnblogs.com/planetwithpig/p/11653732.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>父传字</title>
    <script src="../js/vue.js"></script>
  </head>

  <div id="app">
    <my-com :parent-msg="msg"></my-com>
  </div>

  <body>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "123 啊 父组件中的数据"
        },
        methods: {},
        components: {
          MyCom: {
            data() {
              return {
                title: "123",
                content: "qqq",
				comsVal:''
              };
            },
            template: '<h1 @click="change">这是子组件----{{parentMsg}}</h1>',
            props: ["parentMsg"],
            methods:{
                change(){ 
					comsVal =this.parentMsg
					console.log(comsVal)
                }
            },
			 
          }
        }
      });
    </script>
  </body>
</html>

·
·
·
情况二：子组件要给父组件传值方法，使用$emit

第一步：父组件向子组件传递方法，使用事件绑定机制 v-on，自定义一个事件属性，传递给子组件
第二步：在子组件中定义一个方法，在方法中，利用  $emit  触发 父组件传递过来的，挂载在当前实例上的事件，还可以传递参数
第三步：在子组件中调用定义的那个方法，就可以触发父组件传递过来的方法了

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>子组件要给父组件传值方法，使用$emit</title>
		<script src="../js/vue.js"></script>
	</head>

	<div id="app">
		<!-- 事件绑定机制，传递给子 -->
		<my-com @func="funshow"></my-com>
	</div>
	<template id="tmpl">
		<div>
			这是子组件
			<input type="button" value="这是子组件的按钮，触发了父传来的" @click="myclick" />
		</div>
	</template>

	<body>
		<script>
			var MyCom = {
				template: "#tmpl",
				data() {
					return {
						sonmsg: {
							name: "小头儿子",
							age: 3
						}
					};
				},
				methods: {
					myclick() {
						//  console.log("ok")
						this.$emit("func", this.sonmsg);
					}
				}
			};

			var vm = new Vue({
				el: "#app",
				data: {
					datamsgFromson: null
				},
				methods: {
					funshow(data) {
						// console.log("调用了父组件身上的show方法====" + data1 + data2);
						console.log("调用了父组件身上的show方法====" + data);
						this.datamsgFromson = data;
						console.log(data);
					}
				},
				components: {
					MyCom
				}
			});
		</script>
	</body>
</html>

·
·
·
情况三：父子组件之间相互传值

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>父子组件之间相互传值</title>
		<script src="../js/vue.js"></script>
	</head>

	<div id="app"> 
		<!-- 父组件 -->
		<Button type="primary" @click="getData">获取数据</Button>
		<my-com :fdata="data1" :fmessage="data2" @show="showFather"></my-com>
		<!-- fdata :fmessage 注意驼峰法改为横杆--> 
	</div>
	<template id="tmpl">
		<div>
			<h1>子组件</h1>
			<p>下面是父组件传过来的数据</p>
			<p>第一个数据：{{fdata}}</p>
			<p>第二个数据：{{fmessage}}</p>
			<Button type="primary" @click="sonClick">触发父组件方法</Button>
		</div>
	</template>

	<body>
		<script>
			var MyCom = {
				template: "#tmpl",
				props: ['fdata', 'fmessage'],
				data() {
					return { 
						sonMessage: '子组件数据sonMessage',
						sonData: '子组件数据sonData'
					};
				},
				methods: {
					sonClick() {
						console.log("子组件点击 调用@show==>",this.sonMessage, this.sonData) 
						this.$emit('show', this.sonMessage, this.sonData);
					}
				}
			}; 
			var vm = new Vue({
				el: "#app", 
				data: {
					data1: '父组件数据data1',
					data2: '父组件数据data2',
					fromson1: '',
					fromson2: ''
				},
				methods: { 
						showFather (a, b) {  
					      this.fromson1 = a;
					      this.fromson2 = b;
					      console.log('触发了父组件的方法' + '======' + a + '======' + b);
					    },
					    getData () {
						 console.log("调用方法-getData()")
					      console.log(this.fromson1);
					      console.log(this.fromson2);
					    }
				},
				components: {
					MyCom
				}
			});
		</script>
	</body>
</html>

·
·
·

情况四：兄弟组件之间相互传值——>通过 e m i t / emit/ emit/on

通过$emit/$on

这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级
 

具体实现方式：
    var Event=new Vue();
    Event.$emit(事件名,数据);
    Event.$on(事件名,data => {});

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>兄弟组件之间相互传值</title>
		<script src="../js/vue.js"></script>
	</head>

	<div id="app">
		<my-a></my-a>
		<my-b></my-b>
		<my-c></my-c>
	</div>
	<template id="a">
		<div>
			<h3>A组件：{{nameA}}</h3>
			<button @click="send">将数据发送给C组件</button>
		</div>
	</template>
	<template id="b">
		<div>
			<h3>B组件：{{nameB}}</h3>
			<button @click="send">将数组发送给C组件</button>
		</div>
	</template>
	<template id="c">
		<div>
			<h3>C组件：{{nameA}}，{{nameB}}</h3>
		</div>
	</template> 

	<body>
		<script>
			var Event = new Vue(); //定义一个空的Vue实例 
			var A = {
				template: '#a',
				data() {
					return {
						nameA: '组件A的数据'
					}
				},
				methods: {
					send() {
						Event.$emit('data-a', this.nameA);
					}
				}
			}
			var B = {
				template: '#b',
				data() {
					return {
					   nameB: '组件B的数据'
					}
				},
				methods: {
					send() {
						Event.$emit('data-b', this.nameB);
					}
				}
			}
			var C = {
				template: '#c',
				data() {
					return {
						nameA: '',
						nameB: ""
					}
				},
				mounted() { //在模板编译完成后执行
					Event.$on('data-a', nameA => {
						this.nameA = nameA;
						//箭头函数内部不会产生新的this，这边如果不用=>,this指代Event 
					})
					Event.$on('data-b', nameB => {
						this.nameB = nameB;
					})
				}
			}
			var vm = new Vue({
				el: '#app',
				components: {
					'my-a': A,
					'my-b': B,
					'my-c': C
				}
			});
		</script>
	</body>
</html>

·
·
版本二：

在utils文件夹下面定义一个bus.js，这样一个中央事件总线就定好了，里面内容就这两行：

import Vue from 'vue'
export const Event = new Vue() // 定义一个事件总线

传递方：

import { Event } from '../../utils/bus'  // 引入这个事件总线
export default {
  data() {
    userId: ''
  }
  watch: {
    userId() {  // 监听userId改变时触发事件，当然你可以在所有其他事件去触发$emit
      Event.$emit('changeUser', userId) // $emit接收参数，一个是触发的事件名，一个是携带的参数
    }
 }

接收方：

 import { Event } from '../../utils/bus' // 依然是把bus总线引进来
export default {
created() {
    Event.$on('changeSonRoute',showIndex => {  // $on接收发送方传给我们的数据
      console.log(showIndex)
    })
  }
}

·
·
·
·
·
·
·
··

外部参考链接：
https://www.imooc.com/article/257885
&Cy
关注
专栏目录
Vue3 父子组件传值相互调用方法,兄弟组件传值相互调用方法
weixin_45638884的博客
04-11 1161
fill:#333;color:#333;color:#333;fill:none;父组件子组件1子组件2孙子组件孙子组件。
如何在Vue的父子组件之间传递数据和调用方法
01-08
一、传递数据 有时 在子组件中需要用到父组件的数据 然鹅 在默认情况下 子组件中是无法访问到父组件中的data数据和methods中的方法的 父组件可在在引用的时候通过属性绑定(v-bind)的方式将将需要传递给子组件的数据传递给子组件 然后 在子组件中通过props属性进行定义即可 var vm=new Vue({ el:'#app', data:{ mymsg:123 }, methods:{}, components:{ childcom:{
【Vue】父子组件传值与兄弟传值
qq_45388369的博客
03-10 291
父组件传值到子组件 主要方法，使用vue里面的ref属性，在父组件中调用this.$refs.son1获得子组件，再通过该方法调用子组件内的方法使其获得数据，子组件中必须定义其相应的方法。 在view文件夹中建立父组件father.vue，代码如下： <template> <div id="father"> <el-button type="primary" size="default" @click="send_to_son"> 发送信息给子
父子兄弟组件传值
cdxgg1102225556的博客
10-11 263
1、父组件传值子组件 在引用子组件的时候传递，相当于一个属性，例如：在子组件内通过porps.param获取到这个param的值。 父组件向子组件传值，通过props，将父组件的state传递给了子组件。 父组件代码片段： constructor(props){ super(props) this.state={ message:"i am from parent" } } render(){ return( <Child txt
vue兄弟组件的传值
cp3___的博客
09-03 522
写这篇博客是自己在做vue的一些项目中发现，虽然你更多的是简单的一些父子组件的传值，但是很多场景是需要兄弟组件的传递的，之前不太懂，现在有学习这个vue兄弟组建的传值，来分享给大家 第一种传值方式 新建一个bus.js的文件 2.新建两个兄弟组件child2,child3,需要在每一个兄弟组件里面引入bus.js child2组件通过调用$emit发送给child3 ...
Vue父子组件传值以及兄弟组件传值
weixin_46734347的博客
04-14 1170
1. 父传子 首先我们在component里创建一个子组件，然后用props声明他的属性title，其次在我们的父组件中注册子组件并为属性赋值，最后就可以在子组件中使用这个属性了。 // 子组件 ChildComponent.vue <template> <div> <h2>{{ title }}</h2> </div> </template> <script> export default { p
Vue非父子组件之间传值
01-08
然而，在实际应用中，我们常常需要非父子组件之间进行通信。由于Vue的单向数据流原则，直接修改父组件的值在子组件中是不被推荐的，因此需要采取其他方法来实现实现组件间的数据传递。这里介绍的就是使用“Bus”（或...
vue父组件向子组件动态传值的两种方法
08-28
在 Vue 中，父组件向子组件传值是非常常见的场景。在本文中，我们将介绍两种方法来实现父组件向子组件动态传值。 方法一：使用 Props 传值 在 Vue 中，我们可以使用 props 将数据从父组件传递给子组件。 props 是...
Vue.js中兄弟组件之间互相传值实例
10-19
特别是对于兄弟组件之间的通信，它们不像父子组件之间有直接的通信方式（如props），因此需要借助一些特定的方法来实现。本文介绍了Vue.js中兄弟组件之间互相传值的一个实例，通过建立一个中央事件总线（Central ...
浅谈Vue父子组件和非父子组件传值问题
08-29
Vue 组件传值问题是 Vue 开发中非常重要的一个话题，涉及到父子组件和非父子组件之间的传值问题。今天，我们将一步步地介绍如何在 Vue 中实现组件传值。 组件的创建 创建组件是 Vue 开发的基础步骤。下面是一个...
vue 父子组件传值
qq_33240556的博客
04-22 699
在 Vue.js 中，父子组件间的通信主要通过 Props 和自定义事件（$emit）来进行。
Vue中父子组件之间传值 ，兄弟组件之间传值（两种方法）
qq_56989560的博客
04-10 8599
一。子向父传值props 父组件向子组件传值： parent： <parent> <child :message="msg"></child> //父组件发送 </parent> data(){ return { msg: "this is parent message" } } child： <div> <p>{{message}}</p> </div.
vue父子组件传值
卓越无关环境，保持空杯心态——靡不有初，鲜克有终
01-13 882
目录 复习-定义组件的方式（可跳过） 父组件向子组件传值 子组件向父组件传值 更详细的拓展资料：vue组件间通信 ref获取DOM元素和组件 复习-定义组件的方式（可跳过） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &...
vue中兄弟组件之间传值
Liux- 的博客
03-05 3581
Vue中组件传值，兄弟组件之间传值
Vue父子组件传值
形而上的小鱼
09-01 1399
----父组件向自组件传值----- 1. 父：v-bind:obj=""  子：props=['obj'] 2. 父：引入组件上直接加属性name="zy"，子：用thid.$refs通过dom取到属性值zy ----子组件向父组件传值---- 1. 子：$emit(事件名)传递信号   父：v-on:事件名="自身事件" 监听信号，一旦监听到，立即触发自身事件。 或者$on(事件名)监
vue父子组件间传值
笑不语的博客
06-18 820
子组件 <template> <div class="confirm_button"> <el-button type="primary" @click="getButtonClick">{{text || 确定}}</el-button> </div> </template> <script> ...
Vue组件之间的传值（父子，子父，兄弟传值）
WuqibuHuan的博客
04-28 727
一、父组件向子组件传递数据 在 Vue 中，可以使props向子组件传递数据 子组件部分： 这是 header.vue 的 HTML 部分，logo 是在 data 中定义的变量。 如果需要从父组件获取 logo 的值，就需要使用 props: [‘logo’] 在 props 中添加了元素之后，就不需要在 data 中再添加变量了 父组件部分： 在调用组件的时候，使用 v-bind 将 logo 的值绑定为 App.vue 中定义的变量 logoMsg 然后就能将App.vue中 logoMsg
vue 兄弟组件之间传值，和父子组件之间传值。
Sara0064的博客
12-19 342
从一知半解，再到另一种一知半解，前端就是这么神奇的历程，所以不要怕没有搞不定的事儿，多想想总会栽到坑里再爬起来不就完了的事。所以啊，千万别给自己设上限。 ** 父子组件传值的精髓： 子组件通过this.emit(‘相同事件名’) 父组件通过v-on:相同事件名=“写的事件名” 通信。 ** 通过父组件 v-bind =“传递的值” 子组件 prop{‘传递的值’} 进行通信 vue中兄弟之间传值的...
vue 兄弟组件之间传值
最新发布
04-21
好的，用户想了解在Vue中如何实现兄弟组件之间的传值方法。我需要先回忆一下Vue3中兄弟组件通信的几种方式。根据之前提供的引用，主要有两种方法：使用Mitt插件或者利用provide和inject的响应式API。另外，还有通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值