vue-组件通信(动态组件)

​个人主页：前端青山
系列专栏：Vue篇
人终将被年少不可得之物困其一生

依旧青山,本期给大家带来vue篇专栏内容:vue-组件通信|动态组件

目录

组件通信

1.父传子

2.子传父

3.ref

4.兄弟组件

5.跨层级 provide、inject

动态组件

插槽

1.匿名插槽

2.具名插槽

3.作用域插槽

组件通信

在MVVM框架中，每个组件的数据都具有私有性，即默认情况下，组件自身的数据只允许在本组件内部供自己使用。但实际开发中，我们经常会需要将某些组件的数据对其它组件开放访问，此时就需要使用合适的通信方式来实现数据共享了，Vue框架中支持以下数据通信方式：

• 父传子

• 子传父

• 兄弟通信

• 非常深的层级的父子/子父关系等特殊关系 跨层级

1.父传子

为了便于理解父传子及子传父，在理解时，可以寻求一下两种方式的切入点

即将父组件中的数据传递给子组件。Vue中父传子是借助props来进行传递的。具体实现思路是：

• 父组件将数据以属性的方式绑定在子组件标签上

• 子组件通过props属性进行接收，props支持两种书写形式：

  • 数组形式，书写简单，但不支持类型与默认值约束

  • 对象形式，书写复杂，但支持类型与默认值约束

在子组件收到props数据后，即可将数据当做自身的数据来使用，使用方法参照使用data数据的方式来即可。

请注意，props是单向数据流向的只读属性，不能在子组件中进行对其修改。

2.子传父

即将子组件中的数据传递给父组件。Vue中子传父是借助$emit/$on操作自定义事件实现的。具体实现思路是：

• 在子组件中触发一个自定义事件，将需给父的数据以参数的形式传递给自定义事件

• 父组件在子组件标签上监听刚才触发的自定义事件，并且定义事件处理程序，在事件处理程序中以形参的方式接收来子组件的数据

• 如果需要保存来自子组件的数据，可以在回调函数中将来自子组件的数据保存到自身的data中

3.ref

与子传父（父去拿子的数据）情况类似，形式与this.$children也是非常像的，可以看作ref是this.$children的完美替代方案。通过ref获取子节点实例的时候是不要获取子组件实例对应的索引。

ref属性被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用ref属性，则引用指向的就是 DOM 元素；如果ref属性用在子组件上，引用就指向子组件实例。

​

​

4.兄弟组件

又称eventBus或中央事件总线。

核心步骤

• 建立事件中心

  • const eventBus = new Vue()

• 传递数据

  • eventBus.$emit('自定义事件名',传递的数据)

• 接收数据

  • eventBus.$on('自定义事件名'[,callback])

• 销毁事件中心

  • eventBus.$off('自定义事件名')

案例：互相伤害，具体代码实现可以查看本节对应的代码文件

通过组件模拟俩个角色，赋予组件角色名称、生命值、攻击力，给每个组件一个按钮，点击按钮实现攻击对方，发动攻击后需要扣减对方生命值，当任意一方生命值为0时，游戏结束。

• 先将eventBus全局化（写在main.js中）

  • 思路：将需要全局化的数据挂载到Vue的原型上

  • // 将数据全局化 const eventBus = new Vue() // 只需要将需要全局化的数据放到Vue的原型上 Vue.prototype.$eventBus = eventBus

• 后续按照上面的语法使用即可

5.跨层级 provide、inject

组件通信方式：

1、父传子 props、$parent

2、子传父 自定义事件 $emit 、$children、$refs

3、兄弟 eventbus $emit $on $off

4、跨层级 provider inject 依赖注入 $root

5、组件共享工具 vuex pinia

动态组件

通过使用保留的 元素，动态地绑定到它的is 特性，==我们让多个组件可以使用同一个挂载点（位置），并动态切换。==

语法：

场景：当我们希望实现tab选项卡切换的效果的时候就可以使用动态组件

案例：使用动态组件实现简易的步骤向导效果

插槽

插槽也是组件传值的一种方式。

组件的最大特性就是重用，而用好插槽能大大提高组件的可重用能力。

通俗的来讲，插槽无非就是在子组件中挖个坑，坑里面放什么东西由父组件决定。

插槽类型有：

• 单个（匿名）插槽

• 具名插槽

• 作用域插槽

插槽标签：

1.匿名插槽

简单来讲就是没有名字的插槽，在组件使用过程中，一个子组件中只能具备一个匿名插槽。

步骤

• 父组件通过在子组件标签之间写内容

• 子组件通过插槽获取父写的内容

父组件

    {{thing}}
    用户名不能为空
    用户名已经被使用
    密码输入不一致

子组件

    错误：

2.具名插槽

与匿名插槽非常的像，区别在于具名插槽是具有名字的插槽，与匿名相比多了个名字而已。

步骤

• 子组件通过预留slot标签来挖坑，但是这里插槽有名字（只需要给slot标签name属性即可）

  • name值在当前范围内要唯一

  • 可以存在多个具名插槽

  • 同时也可以存在匿名插槽，匿名插槽只能有一个

• 父组件需要去填坑，父组件写在子组件标签之间的元素也需要存在多个，每个元素上需要有绑定到的插槽的名字（通过slot="名"形式进行指定）

• 如果元素没有名字则绑定到对应的匿名插槽上，如果子组件没有匿名插槽则数据丢弃

3.作用域插槽

应用场景：父组件对子组件的内容进行加工处理

作用域插槽是一种特殊类型的插槽，作用域插槽会绑定了一套数据，父组件可以拿这些数据来用，于是，情况就变成了这样：样式父组件说了算，但父组件中内容可以显示子组件插槽绑定的数据。

简单来讲：子也可以往坑里放数据，让父组件去拿（子→父）

示例代码

==父组件==


​

​

==子组件==

​

​

​