今天学习了父子组件之间的通信，父传子以及子传父：
通过props和$emit进行
父传子：
使用 props这种方式把父组件的数据传给子组件，在调用组件时使用v-bind将参数赋给这个组件，最终 显示出来
<div id="app">
<cpn :cmovies = "movies" :cmessage = "message"></cpn>
</div>
<template id="edce">
<div>
<!-- <p v-for(item)>{{cmovies}}</p> -->
<ul>
<li v-for="item in cmovies">{{item}}</li>
</ul>
<p>{{cmessage}}</p>
</div>
</template>
<script>
Vue.component('cpn', {
template: '#edce',
data () {
return {
}
},
// props:['cmovies','cmessage'],
props: {
cmovies:Array,//可以指定数据类型
//提供一些默认值，以及必传值
cmessage:{
type:String,// 指定类型
default:'aaaaaaa',//默认值
required:ture//如果为ture，表明在传值时候必须传这个参数，不传的话会报错
},
//当类型是对象或者数组时，默认值必须是一个函数
cmoveis:{
type:Array,
default:{
return:[]
}
}
}
})
var app = new Vue({
el: '#app',
data:{
message:'你好呀',
movies:['海王',"海贼王"]}
})
</script>
在使用props{}定义一个数据时可用的数据类型如图所示
image.png
总结：
在注册组件时，使用props将父组件里面的数据接受过来，然后在调用时通过v-bind将数据作为参数调用使其显示出来，达到传值的效果。
（驼峰标识：在定义数据合集时使用驼峰命名法时，调用时需要改成小写字母并且在本该大写字母的前面写一个"-"）
子传父：
使用emit来触发事件。
在父组件中，通过v-on来监听子组件事件。
<body>
<!-- 父组件模板 -->
<div id="app">
<cpn @itemclick ="cpnclick"></cpn>
</div>
<!--子组件模板 -->
<template id="edce">
<div>
<button v-for="item in categories"
@click="btnclick(item)">{{item.name}}
</button>
</div>
</template>
<script>
//子组件
const cpn = {
template: '#edce',
data() {
return {
categories:[
{id:'aaa' ,name:"推荐",},
{id:'bbb' ,name:"手机",},
{id:'ccc' ,name:"电脑",},
{id:'ddd' ,name:"家具",}
]
}
},
methods: {
btnclick(item){
//发射事件：自定义事件
this.$emit('itemclick',item)
//console.log(item.name)
},
}
}
//父组件
var app = new Vue({
el: '#app',
components: {
cpn
},
methods: {
cpnclick(item){
console.log('cpnclick',item)
//console.log('11111111')
}
}
})
</script>
</body>
传递方式如图
image.png
收工睡觉！！！
