vue之父子组件之间的通信（传值）

最新推荐文章于 2022-10-07 14:19:44 发布

帅小伙er

最新推荐文章于 2022-10-07 14:19:44 发布

阅读量319

点赞数 1

分类专栏： Vue入门文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_44832495/article/details/120473925

版权

Vue入门专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue.js之父子组件之间的通信（传值）

在 vue 中，组件与组件之间是可以互相通信的，但是与传统的 Java 不同，vue 中的子组件没有继承这一说，所以和Java中类与类之间的传值可以说没有任何关系。组件之间的通信包括父子组件之间、兄弟组件之间等等，都可以互相通信，因为兄弟组件之间的传值是子组件传给父组件，再由父组件传给另一个子组件，因此下面只讨论父子组件之间通信问题。

子组件获取父组件数据

在 vue 中，组件实例的作用域是孤立的，默认情况下，父子组件的数据是不能共享的，也就是说，子组件是不能直接访问父组件的数据的。为此，vue 给我们提供了一个数据传递的选项 prop，用来将父组件的数据传递给子组件。具体操作如下：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>父组件传给子组件</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
	<div id="wrapper">
		<aaa></aaa>
	</div>

	<script type="text/javascript">
		let vm = new Vue({
			el: "#wrapper",
			components: {
				aaa: {
					//父组件
					template: `	<div>
									<h3>这是父组件组件的显示：{{str}}</h3>
									<br />
									<subcom v-bind:abc="str"></subcom> 
									<hr />
								</div>`, //自定义属性'abc'

					components: {
						//子组件
						subcom: {
							template: `<h5>这是子组件显示的内容：{{abc}}</h5>`,
							props: ["abc"], //自定义属性'abc'
						},
					},

					data() {
						return {
							str: "hello world!",
						};
					},
				},
			},
		});
	</script>
</body>

</html>

上面实例中，子组件获取父组件传递的数据的步骤为：

在子组件标签中，声明 abc 属性，属性值即为父组件向子组件传递的值。
在子组件中，使用 props 选项，声明接收父组件向子组件传递值的载体，即 abc 。
子组件中就可以使用 abc 获取父组件向子组件传递的值了。

父组件获取子组件数据

和上面不一样的是，父组件想要获取子组件的数据时，需要经过子组件的同意，数据不是你想要，想要就能要…咳，需要子组件通过 vue 提供的 emit 方法，主动将自己的数据发送给父组件。具体操作如下：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>子组件传给父组件</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
	<div id="wrapper">
		<aaa></aaa>
	</div>

	<script type="text/javascript">
		let vm = new Vue({
			el: '#wrapper',
			components: {
				aaa: {
					//父组件  当然你也可以写在html的<template>标签里
					template: `	<div>
								<h3>这是父组件组件的显示：{{str}}</h3><br />
								<subcom @abc='get'></subcom>
								<hr />
								</div>`, //自定义事件'abc'
					components: {
						subcom: {
							//子组件
							template: `	<div>
										<h5>这是子组件显示的内容：{{str}}</h5>
										<button @click="send">点我发送数据给父组件</button>
										</div>`,
							data() {
								return {
									str: 'hello world!'
								}
							},
							methods: {
								send() {
                                    //通过emit主动将自己的数据发送给父组件。
									this.$emit('abc', this.str); 
								}
							}
						}
					},

					data() {
						return {
							str: ''
						}
					},
					methods: {
						get(value) {
							this.str = value;
						}
					}
				}
			}
		})
	</script>
</body>

</html>

上面实例中，子组件获取父组件传递的数据的步骤为：

在子组件中触发一个主动发送数据的事件，上面的例子中是一个点击事件send；
在点击事件中使用emit方法，这个emit接收两个参数：传递数据的事件和需要传递的数据，这个传递数据的事件也是自定义的；
在父组件中引用子组件，并在引用的子组件中使用on监听上一步传递数据的事件，上面的例子中是 abc;
在父组件中使用这个事件，这个事件带有一个参数，就是从子组件发送过来的数据。

你学废了吗？

帅小伙er

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue之父子组件之间的通信（传值）

Vue.js之父子组件之间的通信（传值）在Vue中，组件与组件之间是可以互相通信的，但是与传统的Java不同，Vue中的子组件没有继承这一说，所以和Java中类与类之间的传值可以说没有任何关系。组件之间的通信包括父子组件之间、兄弟组件之间等等，都可以互相通信，因为兄弟组件之间的传值是子组件传给父组件，再由父组件传给另一个子组件，因此下面只讨论父子组件之间通信问题。子组件获取父组件数据在vue中，组件实例的作用域是孤立的，默认情况下，父子组件的数据是不能共享的，也就是说，子组件是不能直接访问父组件的数据
复制链接

扫一扫