1.什么是组件通信?为什么要组件通信?
- 组件是具有独立功能的整体,要让它们之间连接起来一起使用,就需要建立通信。
2.组件通信的方式有几种?
- 父子组件通信 ( 用props来实现 )
- 子父组件通信 ( 自定义事件 )
- 非父子组件通信 ( ref链与bus事件总线 )
- 多组件状态共享 (多组件公用一个数据 Vuex)
3.app实例手动挂载
new Vue({
}).$mount('#app')
4.自定义事件
- 自定义的 通过 $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' )
- 通过绑定在组件身上定义,通过 $emit触发,
- 使用: 子父通信
<Son @aa = "fn"/>
动态组件
- 什么是动态组件?
可以改变的组件 - 使用
通过 Vue 提供了一个 component + is 属性 - 动态组件指的就是 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 插槽
- 作用/概念: 预先将将来要使用的内容进行保留
- 具名插槽: 给slot起个名字
- 注意: 以上两种形式在 vue2.6以上被废弃
- 为什么要 用 v-slot指令来代替呢?
- 经具名插槽和作用域插槽进行统一
- 要将这两个属性带有 vue的标志,并且符合vue两个最大的特性之一: 指令的概念