<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue学习</title>
</head>
<body>
<div id="app">
<cpn :cmovies="movies" :cmessage="message"></cpn>
</div>
<template id="cpn">
<ul>
<li v-for="item in cmovies">{{item}}</li>
<p>{{cmessage}}</p>
</ul>
</template>
</body>
<script src="js/vue.js"></script>
<script>
// 子组件
const cpn = {
template:"#cpn",
// props:['cmovies','cmessage']
props:{
// 1类型限制
//cmovies:Array,//可检验传的数据是否是数组
// cmessage:String
//2 提供一些默认值
cmessage:{
type:String,
default:'默认的',
required:true//必传的
},
// 类型是Object或者Array时，默认值必须是一个函数
cmovies:{
type:Array,
default(){
return []
}
}
}
}
// root组件
const app = new Vue({
el:"#app",
components:{
cpn//相当于'cpn':cpn
},
data:{
movies:['大鱼海棠','雪国列车','海王'],
message:'when you are gone'
}
});
</script>
</html>
扫一扫
3220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
