14-父子组件通讯，父传子（props）

最新推荐文章于 2022-11-04 18:34:26 发布

weixin_52135717

最新推荐文章于 2022-11-04 18:34:26 发布

阅读量175

点赞数

分类专栏： VUE基础语法文章标签： vue

本文链接：https://blog.csdn.net/weixin_52135717/article/details/109748001

版权

VUE基础语法专栏收录该内容

23 篇文章 0 订阅

订阅专栏

14-父子组件通讯，父传子（props）

<!DOCTYPE html>
<html>
	<head>
		<script src="./js/vue.min.js"></script>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		<cpn :cmovies = 'movies'></cpn> <!--第三步绑定父组件的数组并在组件中调用   V-bind：cmovies-->
		</div>
		
		<template id="cpn">
			<div>
				<ul>
					<li v-for="item in cmovies" style="list-style: none;">{{item}}</li>
				</ul>
			</div>
		</template>
		
		<script>
			// 父传子 : props
			const app = new Vue({
				el:'#app',
				data(){
					return{
						movies:['1312','321','512521']
					}
				},
				// 第一步创建子组件
				components:{
					'cpn':{
						template:'#cpn',
						props:['cmovies']    //第二步输入父传子的props,并定义参数
					}
				}
				}
			)
		</script>
	</body>
</html>

关于props的另一种写法

<!DOCTYPE html>
<html>
	<head>
		<script src="./js/vue.min.js"></script>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">  <!-- 如果没有进行传参的话，则会输出默认值 -->
		<cpn :cmovies = 'movies' :cmessage='message'></cpn> <!--第三步绑定父组件的数组并在组件中调用   V-bind：cmovies-->
		</div>
		
		<template id="cpn">
			<div>
				<ul>
					<li v-for="item in cmovies" style="list-style: none;">{{item}}</li>
				</ul>
				{{cmessage}}
			</div>
		</template>
		
		<script>
			// 父传子 : props
			const app = new Vue({
				el:'#app',
				data(){
					return{
						movies:['1312','321','512521'],
						message:'啦啦啦'
					}
				},
				// 第一步创建子组件
				components:{
					'cpn':{
						template:'#cpn',
						props:{
							cmovies :{
								type:Array,  
								 default(){
								 	return['1','2','3']
								 }
								  //设置默认值
							},
							//类型是数组时，默认值必须是一个函数
							cmessage:{
								type:String,
								default:'没有传参' 
							}
						
						}   //第二步输入父传子的props,并定义参数,还可以设置类型
					}
				}
				}
			)
		</script>
	</body>
</html>

weixin_52135717

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
14-父子组件通讯，父传子（props）

14-父子组件通讯，父传子（props）<!DOCTYPE html><html> <head> <script src="./js/vue.min.js"></script> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <cpn :cmovies
复制链接

扫一扫