Vue里面的父传子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="./js/vue.js"></script>
		<script src="./js/vue.min.js"></script>
		
		<div id="app">
			
			      <!-- 绑定componnent里面的props的值-->
			<weare v-bind:imovies='movies' ></weare>
			
		</div>
		<template id="we">
			<div>
				<p>{{imovies}}</p>
				<h3>{{imessage}}</h3> 	
			</div>
	
		</template>
	
		<script>	
			Vue.component('weare',{
				template:'#we',
				 /* 1.在这里我们有三种方式绑定props里面的值 ,props里面的属性,就是用来父组件传值的
				 props:['imovies','imessage'], */	 
			 	props:{
					
					//2.类型的限制
					//imovies:Array,
					//imessage:String				
					//3.
					imessage:{
						type:String,
						//default:'aaa' /* 如果没写iMessage 默认写的就是aaa*/
						//required:true /* 如果写required iMessage 必须写 不写就报错*/
					},
					imovies:{
						type:Array,
						default(){ //类型是对象或者数组时,默认值必须是一个函数
							return {}
						} 
					}
				}, 
				data(){
					return{
						
					}
				}
			})
	
			const app = new Vue({
				el:"#app",
				data:{
					message:'你好',
					movies:['海王','海贼王']
					
				},
				methods:{
					
				}
			})
		</script>
	
	</body>
</html>

你可能感兴趣的:(Vue里面的父传子)