组件通信
1. 为什么要进行组件通信?
1. 组件可以说是一个具有独立功能的整体,但是当我们要将这些组件拼接在一起时,这些组件相互之间要建立联系 ,这个联系我们就称之为通信
2. 组件通信的方式有以下几种( 王者级 )
1. 父子组件通信 使用props来实现props\1. 在父组件的模板中将数据用单项数据绑定的形式,绑定在子组件身上<Son :money = "money"/>\2. 在子组件的配置项中可以使用一个props配置项来接收这个数据,接收时,props的取值可以使一个数组Vue.component('Son',{template: '#son',props: ['money']})\3. 在子组件模板中,接收到的属性可以像全局变量一样直接使用父亲给了我 {{ money }} 钱
2. 子父组件通信
1. 自定义事件
\1. 自定义的 通过 $on 定义 $emit触发\2. 通过绑定在组件身上定义,通过 KaTeX parse error: Expected '}', got '#' at position 199: …n',{template: '#̲son',data () {r…emit(‘give’,this.hongbao)}}})3. 将子组件定义的事件处理程序 giveFather,绑定在子组件的按钮身上<button @click = “giveFather”> give
这里是son组件
3. 非父子组件通信 ref链 bus事件总线4. 多组件状态共享( 多个组件共用同一个数据 ) 大知识点( vuex ) vuex
app实例的手动挂载new Vue({}).$mount(’#app’)自定义事件1.自定义的 通过 $on 定义 KaTeX parse error: Expected '}', got '#' at position 30: … new Vue({el: '#̲app'})// 自定义事件的…on(自定义事件的名称,自定义事件的事件处理程序)vm.
o
n
(
′
a
a
′
,
f
u
n
c
t
i
o
n
(
)
c
o
n
s
o
l
e
.
l
o
g
(
′
a
a
′
)
)
/
/
自
定
义
事
件
的
触
发
(
订
阅
)
/
/
v
m
.
on( 'aa', function () {console.log( 'aa' )})//自定义事件的触发 ( 订阅 )// vm.
on(′aa′,function()console.log(′aa′))//自定义事件的触发(订阅)//vm.emit( 自定义事件的名称,自定义事件处理程序需要的参数1,参数2,参数3)vm.$emit( ‘aa’ )
1. 通过绑定在组件身上定义,通过 $emit触发 <Son @aa = “fn”/>
使用: 子父通信组件的根元素必须有且仅有一个动态组件
1. 什么是动态组件? 可以改变的组件
2. 使用 通过 Vue 提供了一个 component + is 属性
3. 动态组件指的就是 component这个组件
4. 案例
5. Vue提供了一个叫做 keep-alive 的组件可以将我们的组件进行浏览器缓存,这样当我们切换组件时,就可以大大提高使用效率
6. keep-alive也可以以属性的形式呈现,但是我们如果搭配component的话,建议使用组件的形式
slot 插槽
1. 作用/概念: 预先将将来要使用的内容进行保留
2. 具名插槽: 给slot起个名字
* 注意: 以上两种形式在 vue2.6以上被废弃
- 为什么要 用 v-slot指令来代替呢?
- 经具名插槽和作用域插槽进行统一
- 要将这两个属性带有 vue的标志,并且符合vue两个最大的特性之一: 指令的概念
2.6版本前的会,2.6版本后的v-slot也得会
- 要将这两个属性带有 vue的标志,并且符合vue两个最大的特性之一: 指令的概念
- 经具名插槽和作用域插槽进行统一