在组件中,使用选项props来声明需要从父级接收到的数据
props的值有两种方式:
方式一:字符串数组,数组中的字符串就是传递时的名称。
方式二:对象,对象可以设置传递的类型,也可以设置默认值等。
例:(父传子)
方式1:
<body>
<div id="app">
<cpn :cmovies="movies"></cpn>
</div>
<template id="cpn1">
<div>
<ul>
<li v-for="item in cmovies">{{item}}</li>
</ul>
</div>
</template>
<script src="../vue.js"></script>
<script>
const cpn = {
template:'#cpn1',
props:['cmovies'],// 方式1
// 方式2:
props:{
cmovies: {
type: Array,
default(){ // 默认值
return ['aaa','bbb'];
},
required: true
}
},
props:Array,
data(){
return {}
},
methods: {
},
}
const app = new Vue({
el:"#app",
data:{
movies:['hello','world']
},
components:{
cpn
}
});
</script>
</body>