vue10--组件之间的通信--父往子传值(可自动触发)

最新推荐文章于 2023-06-01 18:16:24 发布

婉菡

最新推荐文章于 2023-06-01 18:16:24 发布

阅读量148

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/gcyqweasd/article/details/113799105

版权

本文探讨了Vue.js中父组件如何向子组件传递数据，实现数据的自动更新。通过props属性，父组件可以将状态传递给子组件，并在父组件状态改变时自动同步到子组件，确保应用的响应式更新。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>组件之间的通信--父往子传值(可自动触发)</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
	</head>

	<body>
		<div id="app">
			父子组件嵌套
			<father></father>
		</div>
		
		<template id="father">
			<div>
				我是父组件:{{msg}}
				<son :mm="data1" ></son><!--父组件往子组件里边传值-->
			</div>
		</template>
		
		<template id="son">
			<div>
				我是子组件:{{mm}}
			</div>
		</template>
		
		<script>
			let vm = new Vue({
				el: '#app',
				components: {
					'father': {
						template: '#father',
						data() {
							return {
								msg: '测试父组件内容',
								data1:'来源于父组件的数据'
							}
						},
						components: {
							'son': {
								template: '#son',
								props:['mm']//子组件声明且接值
							}

						}
					}
				}
			});
		</script>
	</body>

</html>

在这里插入图片描述

婉菡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
vue10--组件之间的通信--父往子传值(可自动触发)

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>组件之间的通信--父往子传值(可自动触发)</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> &l
复制链接

扫一扫

专栏目录