组件可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起时，这些组件相互之间要建立联系，这个联系我们就称之为通信
1. 父子组件通信 ： 使用props来实现
(1).在父组件的模板中将数据用单项数据绑定的形式，绑定在子组件身上
<Son :money = "money"/>
在子组件的配置项中可以使用一个props配置项来接收这个数据，接收时，props的取值可以是一个数组
Vue.component('Son',{
template: '#son',
props: ['money']
})
(2).在子组件模板中，接收到的属性可以像全局变量一样直接使用
<p> 父亲给了我 {{ money }} 钱 </p>
2. 子父组件通信
自定义事件
(1). 在父组件的模板中，通过事件绑定的形式，绑定一个自定义事件在子组件身上
//这边要注意： fn是要在父组件配置项methods中定义
<Son @aa = “fn”/>
(2). 在子组件的配置项methods中写一个事件处理程序，在事件处理程序中触发父组件绑定的自定义事件
Vue.component('Son',{
template: '#son',
data () {
return {
hongbao: 500
}
},
methods: {
giveFather () {
//如何进行父组件给子组件的自定义事件触发
this.$emit('give',this.hongbao)
}
}
})
将子组件定义的事件处理程序 giveFather,绑定在子组件的按钮身上
<template id="son">
<div>
<button @click = "giveFather"> give </button>
<h3> 这里是son组件 </h3>
</div>
</template>
3. 非父子组件通信
(1). ref链: 可以实现非父子组件的通信，但是如果层级太多，就比较繁琐了 $attrs
bus事件总线
在其中一个组件的 挂载钩子函数 上 做事件的声明
Vue.component('Sma',{
template: '#small',
data () {
return {
flag: false
}
},
//当前组件挂载结束，也就是我们可以在页面当中看到真实dom
mounted () {
// mounted这个钩子函数的触发条件是组件创建时会自动触发
// 事件的声明
var _this = this
bus.$on( 'aa',function () {
_this.flag = true
//这里是this指的是bus， 但是我们需要的this应该是Sma这个组件
console.log( this )
})
}
})
在另一个组件中 通过 bus.$emit(‘aa’)来触发这个自定义事件
多组件状态共享（ 多个组件共用同一个数据 ） 大知识点（ vuex ）
new Vue({
}).$mount('#app')
1. 自定义的 通过 $on 定义 $emit触发
var vm = new Vue({
el: '#app'
})
// 自定义事件的定义（ 发布 ）
// vm.$on(自定义事件的名称，自定义事件的事件处理程序)
vm.$on( 'aa', function () {
console.log( 'aa' )
})
//自定义事件的触发
// vm.$emit( 自定义事件的名称，自定义事件处理程序需要的参数1，参数2，参数3)
vm.$emit( 'aa' )
2. 通过绑定在组件身上定义，通过 $emit触发
<Son @aa = “fn”/>
使用： 子父通信
动态组件
1. 什么是动态组件？
可以改变的组件
2. 使用
通过 Vue 提供了一个 component + is 属性
3. 动态组件指的就是 component这个组件
案例
<div id="app">
<button @click = "change"> 切换 </button>
<keep-alive include="">
<component :is = "type"></component>
</keep-alive>
</div>
Vue.component('Aa',{
template: '<div> Aa </div>'
})
Vue.component('Bb',{
template: '<div> Bb </div>'
})
new Vue({
data: {
type: 'Aa'
},
methods: {
change () {
this.type = (this.type === 'Aa'?'Bb':'Aa')
}
}
}).$mount('#app')
Vue提供了一个叫做 keep-alive 的组件可以将我们的组件进行浏览器缓存，这样当我们切换组件时，就可以大大提高使用效率
keep-alive也可以以属性的形式呈现，但是我们如果搭配component的话，建议使用组件的形式
作用/概念 : 预先将将来要使用的内容进行保留
具名插槽 ： 给slot起个名字
注意 ： 以上两种形式在 vue2.6以上被废弃
为什么要 用 v-slot指令来代替呢？
(1).经具名插槽和作用域插槽进行统一
(2).要将这两个属性带有 vue的标志，并且符合vue两个最大的特性之一： 指令的概念