这是我参与「第四届青训营 」笔记创作活动的的第7天
1、父子组件之间的通信
- 通过props向子组件传递数据；父==>子
- 通过（自定义）事件向父组件发送消息；子==>父
1.1 props的基本用法（父组件向子组件传递数据 ）
在组件中，使用选项props来声明需要从父级接收到的数据
props的值有两种方式：
方式一：字符串数组，数组中的字符串就是传递时的名称；
//父==>子
<body>
<div id="app">
<cpn :cbooks="books" :message="msg"></cpn>
</div>
<template id="cpn1">
<div>
<h2 v-for="item in cbooks">{{item}}</h2>
<p>{{message}}</p>
</div>
</template>
<script>
const cpn = Vue.extend({
template:'#cpn1',
props:['cbooks','message']
})
const App = new Vue({
el:'#app',
data: {
books:['《算法导论》','《UNIX编程艺术》','《计算机网络》','《操作系统》'],
msg:"zwx"
},
components:{
cpn
}
})
</script>
</body>
方式二：对象，对象可以设置传递时的类型，也可以设置默认值等；
1.2 子传父
<body>
<div id="app">
<!-- 子组件发送事件 父组件在此监听事件 以前v-on监听的默认事件click、touch begin事件
现在也可以监听子组件发射过来的自定义事件 -->
<cpn @itemclick = "cpnClick()"></cpn>
</div>
<template id="cpn1">
<!-- 这里为什么必须需要一个div？？？ -->
<div>
<!-- 子组件谁被点击了 将事件传递给父组件 -->
<button v-for="item in categories" @click="itemclick(item)">{{item.name}}</button>
</div>
</template>
<script>
//子组件
const cpn = Vue.extend({
emplate:'#cpn1',
data(){
return{
categories:[
{id:1, name:'热门推荐'},
{id:2, name:'潮流男装'},
{id:3, name:'智能家居'},
{id:4, name:'生活用品'},
]}
},
methods:{
itemclick(item){
// console.log(item);
// 子组件向父组件发送一个事件this.$emit('发送事件名称'，传递参数)
this.$emit('itemclick',item);
}
}
})
//父组件
const App = new Vue({
el:'#app',
data: {},
components:{cpn},
methods:{
cpnClick(item){console.log('123');}
}
})
</script>
</body>
自定义事件的流程：
- 在子组件中。通过$emit()来触发事件；
- 在父组件中，通过v-on来监听子组件的事件；
1.3 子访问父
- parent进行访问父组件中的某个属性时，很难保证所有父组件都拥有这个属性，会导致报错。也会使父子组件耦合性太高
- $root 访问根组件 访问Vue实例
1.4 父访问子
-
refs
-
$children使用的比较少，因为它是通过数组下标来获取父组件中的所有子组件，一旦在目标组件 之前插入一个新的子组件，目标组件的下标值就会 发生改变
-
一般在开发中使用$refs
（1）需要先在子组件上加ref属性
（2） 默认是一个空对象，在子组件上加了ref后，在父组件中可以使用
