vue父传子

最新推荐文章于 2024-05-17 08:00:00 发布

LoveMe_LoveMyDog

最新推荐文章于 2024-05-17 08:00:00 发布

阅读量1.4k

点赞数

文章标签： vue js props/state

本文链接：https://blog.csdn.net/LoveMe_LoveMyDog/article/details/115603689

版权

vue父传子

复习下vue的父传子

先写下vue的基本东西，来个div给个id，挂载在Vue上。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{message}}
		</div>
		<script>
			var app =new Vue({
				el:"#app",
				data:{
					message:"好好学习"
				}
			});
		</script>
	</body>
</html>

这个时候，我们app其实就是一个组件了，应该是叫根组件吧，然后要穿值到子组件，就要在父组件里面填数据，因为这里是根组件，父组件的data是对象（其他情况下，组件的data是函数）

data:{
					message:"好好学习",
					movie:["星期一","星期二","星期三"]
				},

现在写个子组件吧

		<template id="cpn">
			<div>
				<ul>
					<li v-for="m in cmovie">{{m}}</li>
				</ul>
				{{cmovie}}{{cmessage}}
			</div>
		</template>

id叫cpn，子组件需要在外面有个根div，至于为什么，我现在也忘了，好像一个便签在里面可以不要在外面写个根div，两个及以上就必须要写。

现在需要吧子组件注册到父组件上面，注册的写法

components:{
					cpn
				}

这个components和父组件的data同及的。我这个是抽离的写法，components里面的cpn，我写在外面

const cpn={
				template:`#cpn`,
				/* props:["cmovie"], */
				props:{
					cmovie:Array,
					/* cmessage:String, */
					cmessage:{
						type:String,
						default:"hahhaha",
						required:true  /* 必传的,不传报错 */
					}
				}
				
			}

这里template表示吧子组件挂载到cpn上，到时候就直接在app上写。重点来了，props就是父传子在component是里面的属性，里面可以放String,Number,Boolean,Array,Object,Function,Promise // or any other constructor。
cmovie表示在子组件里，存数据的一个变量名，后面跟‘’：‘’，表示规定数据的类型。cmessage也是一个变量名，写成这种类型，可以多写些属性在里面，type：写类型，default：不传的时候，显示default里面的内容，required：写Boolean类型的，true表示必须传，不传就报错，false反之。
真的是最后了，现在就在el挂载的app里面用它了

<div id="app">
			<cpn :cmovie="movie" :cmessage="message"></cpn>
		</div>

本来就是当成标签来使用的，里面给它来个v-bind，cmovie传入movie的值，movie本来就在根组件里面，这样就完成了父传子了。
最后的最后，有什么说的不对的，希望各位大佬斧正，也希望和大家多多交流。
over，撒花。

LoveMe_LoveMyDog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue父传子

vue父传子复习下vue的父传子先写下vue的基本东西，来个div给个id，挂载在Vue上。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js"></script> </head> <body> <div id="app
复制链接

扫一扫