Vue父子组件间传递数据_vue父子传id-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41339192/article/details/103043994

本文详细介绍了在Vue.js中如何实现父组件向子组件传递数据及子组件向父组件发送数据的过程。包括父组件通过props传递数据至子组件的三步骤，以及子组件如何通过$emit发射事件来通知父组件并传递数据。

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

一、父组件向子组件传递数据（三步）

1、创建Vue实例和子组件

<template id="cpn">
	<div>
		<h2></h2>
	</div>
</template>
<script type="text/javascript">
	const cpn = {
		template: '#cpn',
	}
	const app = new Vue({
		el: '#app',
		data: {
			people: ['华晨宇','林俊杰','张韶涵','张靓颖']
		},
		components: {
			cpn // es6的对象增强写法，
			// 当属性名与值的变量相同可用
		}
	})
</script>

2、在子组件中添加一个属性props

<template id="cpn">
	<div>
		<h2></h2>
	</div>
</template>
<script type="text/javascript">
	const cpn = {
		template: '#cpn',
		props: ['cpeople']   //此处为添加的props属性
	}
	const app = new Vue({
		el: '#app',
		data: {
			people: ['华晨宇','林俊杰','张韶涵','张靓颖']
		},
		components: {
			cpn
		}
	})
</script>

// 其中props定义类型有多种
// 1、prop:['cpeople']
// 2、prop:{cpeople: [Array]} 使用对象定义时，可以限制传过来的
// 数据必须是规定的类型，如此处规定必须是数组,可以是多个类型
// 3、props: {
//	   cpeople: {
//		type: Array,
//		default:['张杰','张碧晨','陈奕迅','邓紫棋','汪峰'],
// 		require: true
//	   }
//	} 这种定义方法中的type限制传过来的数据的类型,default表示
// 为传数据时使用的默认值,require为真表示必须传值，否则会报错
// 其中如果type为Array或者Object时default最好写成带返回值的
// 方法，因为高版本的vue会报错
// 注意如果props定义的属性是驼峰标识，在第三步绑定时必须改为
// 小写，并且在大写字母前必须用'-'与前一个字母连接
// props为组件定义的标签添加属性

3、使用cpn时绑定父组件的数据

<body>
	<div id="app">
		<cpn :cpeople="people"></cpn>
	</div>
</body>

// :cpeople="people"
// 是将父组件的数据people绑定到子组件的cpeople

以上三步即可实现父组件传数据到子组件

4、子组件使用父组件传递过来的数据

<template id="cpn">
	<div>
		<h2 v-for="item in cpeople">{{item}}</h2>
	</div>
</template>

// 完成以上三步之后，就和正常使用data中的数据一样使用即可

二、子组件向父组件传递数据

1、子组件点击后发射事件

// template代码
<h2 v-for="item in cThing" @click="btnClick(item)">
	{{item}}
</h2>
// 子组件
const cpn = {
	template: '#cpn',
	methods: {
		btnClick(item) {
			// 发射事件
			this.$emit('item-click',item)
		}
	}
}
// this.$emit(event,data): 用来发射事件，event为事件的名称
// data是传送的数据
// 父组件通过监听这个事件名，执行相应操作

2、父组件监听子组件发射的事件

// 页面代码
<div id="app">
	<cpn :c-thing="thing" @item-click="itemClick"></cpn>
</div>

// 父组件
const app = new Vue({
	el: '#app',
	data: {
		thing: ['trees','sky','birds','people']
	},
	methods: {
		itemClick(item) {
			console.log(item)
		}
	}
})

// 在页面代码中，@item-click和子组件发射的事件必须一致，此外，
// 事件名不可以是驼峰，
// 在页面代码中监听item-clik事件的执行函数itemClick不传参数
// 因为不传参数,会默认将监听事件中的参数传入执行函数itemClick
// 此时在父组件就接收到了子组件传过来的参数