提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue.js父传子案例

VueJS案例
2023-09-27 14:22:47 时间

如何进行父子组件间的通信呢？Vue官方提到

  • 通过props向子组件传递数据
  • 通过事件向父组件发送消息

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>父传子</title>
		<script src="../../lib/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<cpn :cmovies = "movies"></cpn>
		</div>
		<script>
			const cpn ={
				template: `
					<div>
						<h2>{{cmovies}}</h2>
					</div>
				`,
				props: ['cmovies']
			};
			const app = new Vue({
				el: "#app",
				data:{
					movies: ['Die hard 1', 'Die hard 2', 'Die hard 3']
				},
				components:{
					cpn
				}
			});
		</script>
	</body>
</html>

相关文章