<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<cpn v-bind:c-movies="movies" :cmessage="message"></cpn> <!--如果这里去掉:cmessage="message",则cmessage为默认值default:"aaa"-->
</div>
<!--//这里要写成:c-M(m)ovies="movies",因为下面props里面时驼峰命名法cMovies-->
<template id="cpn">
<div >
<ul>
<li v-for="item in cMovies">{{item}}</li>
</ul>
<h2>{{cmessage}}</h2>
</div>
</template>
<script>
const cpn={
template:"#cpn",
// props:['cmovies','cmessage'],
props:{
//1.类型限制
//cmovies:Array,
//2.提供默认值
cmessage:{
type:String,
default:"aaa", //当没传这个变量时,默认为”aaa“
required:true //使该值必须传
},
//类型是对象或数组时,默认值必须是一个函数
cMovies:{
type:Array,
default(){ //默认值
return []
}
}
},
data(){
return {}
}
}
new Vue({
el:"#root",
data:{
movies:["哪咤闹海","海王","海贼王"],
message:"asd"
},
components:{
cpn //加强写法
},
methods:{
},
computed:{
},
filters:{ //过滤器
}
})
</script>
</body>
</html>
最后
以上就是强健铃铛最近收集整理的关于vue(父子组件的通信--父组件向子组件通信,及props的驼峰标识)的全部内容,更多相关vue(父子组件内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复