子组件是不能引用父组件或者vue的实例数据的，但是在开发中一些数据需要从上层传递到下沉，比如在下面的页面中，我们从服务器请求到了很多的数据，其中一部分数据是需要子组件来进行展示的，这个时候，并不会让子组件在次发送网络请求，而是直接将大组件的数据传递给小组件
父子通信的两种方式
1，用props向子组件传递数据
（vue实例是根组件，最大的父组件）
num就是父传子的元素
<body>
<div id="app">
<cpn v-bind:cnum = "num"></cpn>
</div>
<template id = "cpn">
<div>
{{cnum}}
</div>
</template>
<script>
// 父传子
const cpn = {
template: '#cpn',
//注意v-bind是不支持驼峰标志的所以下面的cnum不要写成cNum，或者写成驼峰改成v-bind：c-num
props:{
// 1,类型限制 type:
// 2,是否必须传 require: 布尔值
// 3,默认值 default: 如果是个数组和对象的话必须使用函数传如下
cnum:{
type:Array,//要求是个数组类型
require: true,
default(){
return ['1']
}
}
//
},
data(){
return {
}
}
}
var vm = new Vue({
el: '#app',
data: {
num: ['1','2','3']
},
components:{
cpn,
}
});
</script>
</body>
2，通过自定义事件向子组件传递数据
在子组件中通过$emit()来向父组件发送事件，
在父组件中，通过v-on来监听子组件事件
<body>
<div id="app">
<!-- 父组件v-on接收子组件发生的事件 -->
<cpn v-on:itemclick = "cpnClick"></cpn>
</div>
<template id = "cpn">
<div>
<button v-for="item in categories" @click = "bCli(item)">
{{item.name}}
</button>
</div>
</template>
<script>
// 父传子
// 子组件
const cpn = {
template: '#cpn',
props:{
},
data(){
return {
categories:[
{id:'1',name:'热门推荐'},
{id:'2',name:'手机推荐'},
{id:'3',name:'电脑推荐'}
]
}
},
methods:{
bCli(item){
// 子组件发射一个事件,item是参数
this.$emit('itemclick',item)
}
}
}
var vm = new Vue({
el: '#app',
data: {
num: ['1','2','3']
},
components:{
cpn,
},
methods:{
cpnClick(item){
//表示接受到子组件传过来的参数
console.log(item);
}
}
});
</script>
</body>
