<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 用v-bind传递父辈的数据-->
<!-- <cpn v-bind:cmovies="movies" :cmessage="message"></cpn>-->
<cpn :cmessage="message" :cmovies="movies"></cpn>
</div>
<template id="cpn">
<div>
<h2>
<ul>
<li v-for="item in cmovies">{{item}}</li>
</ul>
</h2>
<h2>{{cmessage}}</h2>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
//父传子:props
const cpn={
template:`#cpn`,
//通过数组
//cmovies和cmeaage是变量
// props:['cmovies','cmessage'],
props:{
// 类型限制 Array是数组类型
// cmovies: Array,
// cmessage:String,
// 2.提供一些默认值
// default 传入失败的时候显示的内容
// required 设置为true,那么就必须传入这个值,否则报错
cmessage:{
type:String,
default:'aaaaaa',
required:true,
},
//类型是对象或者数组时,默认值必须是一个函数
cmovies:{
type:Array,
default(){
return []
},
}
},
data(){
return{
}
}
}
const app = new Vue({
el:'#app',
data:{
message:'你好啊',
movies:['aaa','bbb','ccc']
},
components:{
cpn,
}
})
</script>
</body>
</html>
08-29
2万+
09-10