8组件通信-父组件向子组件传递数据-数组

最新推荐文章于 2024-10-10 09:57:27 发布

原创最新推荐文章于 2024-10-10 09:57:27 发布 · 652 阅读

0 ·

CC 4.0 BY-SA版权

Vue 同时被 2 个专栏收录

6 篇文章

订阅专栏

前端

4 篇文章

订阅专栏

本文通过一个Vue实例详细解析了组件使用中常见的两大误区：一是组件模板必须包裹在一个根元素中；二是当存在多个根元素时，仅首个根元素会被渲染。文章通过示例代码展示了正确的组件结构及父组件向子组件传递属性的方法。

三个注意点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<cpn :cmovies='movies' :cmessage='message'></cpn>
		</div>
		
		<template id="cpn">
			
			
			<!-- 1.错误点，必须在一个大div包裹里  -->
			<!-- <div>
				{{cmovies}}
			</div>
			<h2>{{cmessage}}</h2> -->
			
			
			<!-- 2.错误点：两个div 只显示第一个div -->
			
			<!-- <div>
				<ul>
					<li v-for="item in cmovies">{{item}}</li>
				</ul>
				<h2>{{cmessage}}</h2>
			</div>
			
			<div>
				<p>{{cmovies}}</p>
				<h2>{{cmessage}}</h2>
			</div> -->
			
			
			<!-- 可以这样写 -->
			<div>
				<ul>
					<li v-for="item in cmovies">{{item}}</li>
				</ul>
				<h2>{{cmessage}}</h2>
				
				<div>
					<p>{{cmovies}}</p>
					<h2>{{cmessage}}</h2>
				</div>
				
			</div>
			
			
		</template>
		
		
		
		<script src="../../vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
			// 父传子 props
			const cpn ={
				template:'#cpn',
				props:['cmovies','cmessage'],
				data() {
					return {}
				},
				methods:{
					
				}
				
			}
			
			
			
			const app=new Vue({
				el:'#app',
				data:{
					message:'你好',
					movies:['1','2','3','4'],
				},
				components:{
					// 'cpn':cpn
					cpn
				}
			})
		</script>
		
	</body>
</html>