父子组件之间的传值

最新推荐文章于 2023-05-11 20:58:14 发布

原创最新推荐文章于 2023-05-11 20:58:14 发布

· 258 阅读

0 ·

版权

文章标签：

#vue

先准备一个例子，

这是父组件传递给子组件。子组件使用props接收

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="https://unpkg.com/vue"></script>
	</head>
	<body>
		<div id="app">
			<div>
				<h1>这是父组件</h1>
				<!-- msg是父组件实例里面data的msg 传递给子组件的parentmsg，
					子组件通过props接收 -->
				<com2 :parent-msg="msg"></com2>
			</div>
		</div>



		<!-- 创建子组件 -->
		<template id="tem1">
			<div>
				<h3>我是子组件 -----{{parentMsg}}</h3>
			</div>
		</template>
		<script>
			let com2 = {
				template: '#tem1',
				data() {
					return {}
				},
				methods: {},
				props:["parentMsg"]
			}
			var vm = new Vue({
				el: '#app',
				data: {
					msg: '这是父组件的信息',
					count: 1,
				},
				methods: {},
				components: {
					com2,
				},
			})
		</script>
	</body>
</html>