Vue 组件父子组件间的数据传递

最新推荐文章于 2022-07-27 09:56:08 发布

原创最新推荐文章于 2022-07-27 09:56:08 发布 · 270 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

35 篇文章

订阅专栏

本文详细介绍了Vue.js中组件间的通信机制，包括父组件向子组件传递数据的方法及子组件如何通过事件触发的方式向父组件传递数据。通过具体示例展示了如何实现数据的双向流动，为开发者提供实用的组件间通信技巧。

首先定义一个组件（局部组件）

	<div id="root">
		<counter></counter>
		<counter></counter>
	</div>
	<script>
		// 局部组件
		var counter = {
			template: "<div>0</div>"
		}
		var vm = new Vue({
			el: "#root",
			components: {
				counter: counter
			}
		})
	</script>

父组件向子组件传递数据 —— 通过属性

下面，父组件通过count 属性向子组件中传递了一个数字，同时子组件接收该属性

	<div id="root">
		<counter :count="1"></counter>
		<counter :count="2"></counter>
	</div>
	<script>
		// 局部组件
		var counter = {
			props: ["count"],
			template: "<div>{{count}}</div>"
		}
		var vm = new Vue({
			el: "#root",
			components: {
				counter: counter
			}
		})
	</script>

Vue 中有“单向数据流”概念。父组件可以向子组件中通过属性方式传递数据并修改数据，但子组件不可以修改该数据。

那么如何获得父组件的数据并修改呢？

将父组件的值赋值给子组件的data中的数据即可，如下。

	<div id="root">
		<counter :count="1"></counter>
		<counter :count="2"></counter>
	</div>
	<script>
		// 局部组件
		var counter = {
			props: ["count"],
			template: "<div @click='handleClick'>{{number}}</div>",
			data: function(){
				return {
					number: this.count
				}
			},
			methods: {
				handleClick: function(){
					this.number ++ ;
				}
			}
		}
		var vm = new Vue({
			el: "#root",
			components: {
				counter: counter
			}
		})
	</script>

子组件向父组件中传数据 —— 事件触发的方式

如下。

	<div id="root">
		<counter :count="0" @change="handlechange"></counter>
		<counter :count="0" @change="handlechange"></counter>
		<div>{{total}}</div>
	</div>
	<script>
		// 局部组件
		var counter = {
			props: ["count"],
			template: "<div @click='handleClick'>{{number}}</div>",
			data: function(){
				return {
					number: this.count
				}
			},
			methods: {
				handleClick: function(){
					this.number ++ ;
					this.$emit("change", 1);
				}
			}
		}
		var vm = new Vue({
			el: "#root",
			data: {
				total: 0
			},
			components: {
				counter: counter
			},
			methods: {
				handlechange: function(step){
					this.total += step;
				}
			}
		})
	</script>