vue3 组合式API ＜script setup＞中子组件之间传值逻辑
下面介绍以下七种组件通信方式:
- props
- emit
- v-model
- refs
- provide/inject
- eventBus
1. Props
父组件代码如下：
子组件只需要渲染父组件传递的值。代码如下：
- {{ i }}
2. Emit
子组件代码如下：
- 点击子组件中的【添加】按钮后，我们会发出一个自定义事件，并将添加的值作为参数传递给父组件。
父组件代码如下：
- {{ i }}
在父组件中，只需要监听子组件的自定义事件，然后执行相应的添加逻辑即可。
3. v-model
v-model 是 Vue 中一个优秀的语法糖，比如下面的代码。
这是以下代码的简写形式
子组件
在子组件中，我们先定义props和emits，添加完成后再发出指定的事件。
注意：update:*是Vue中固定的写法，*代表props中的一个属性名。
在父组件中使用比较简单，代码如下：
- {{ i }}
4. Refs
使用API选项时，我们可以通过this.$refs.name获取指定的元素或组件，但在组合API中不行。如果我们想通过ref获取，需要定义一个同名的Ref对象，在组件挂载后可以访问。
示例代码如下：
-
{{ i }}
子组件代码如下：
注意：默认情况下，setup 组件是关闭的，通过模板 ref 获取组件的公共实例。如果需要公开，需要通过defineExpose API 公开。
5. provide/inject
provide/inject是 Vue 中提供的一对 API。无论层级多深，API 都可以实现父组件到子组件的数据传递。
父组件
- 子组件
- {{ i }}
注意：使用 provide 进行数据传输时，尽量使用 readonly 封装数据，避免子组件修改父组件传递的数据。
6. eventBus
Vue 3 中移除了 eventBus，但可以借助第三方工具来完成。Vue 官方推荐使用 mitt 或 tiny-emitter。在大多数情况下，不建议使用全局事件总线来实现组件通信。虽然比较简单粗暴，但是维护事件总线从长远来看是个大问题。
- 首先，需要安装
mitt：
npm install --save mitt
- 然后在
libs文件夹下，创建一个bus.ts文件，内容和旧版写法其实是一样的，只不过是把 Vue 实例，换成了 mitt 实例。
import mitt from 'mitt';
export default mitt();
- 创建和移除监听事件
在需要暴露交流事件的组件里，通过 on 配置好接收方法，同时为了避免路由切换过程中造成事件多次被绑定，多次触发，需要在适当的时机 off 掉：
import { defineComponent, onBeforeUnmount } from 'vue'
import bus from '@libs/bus'
export default defineComponent({
setup () {
// 定义一个打招呼的方法
const sayHi = (msg: string = 'Hello World!'): void => {
console.log(msg);
}
// 启用监听
bus.on('sayHi', sayHi);
// 在组件卸载之前移除监听
onBeforeUnmount( () => {
bus.off('sayHi', sayHi);
})
}
})
- 调用监听事件
在需要调用交流事件的组件里，通过 emit 进行调用：
import { defineComponent } from 'vue'
import bus from '@libs/bus'
export default defineComponent({
setup () {
// 调用打招呼事件，传入消息内容
bus.emit('sayHi', '哈哈哈哈哈哈哈哈哈哈哈哈哈哈');
}
})
旧项目升级 EventBus
在 Vue 3.x 的 EventBus，我们可以看到它的 API 和旧版是非常接近的，只是去掉了 $ 符号。
如果你要对旧的项目进行升级改造，因为原来都是使用了 $on 、 $emit 等旧的 API ，一个一个组件去修改成新的 API 肯定不现实。
我们可以在创建 bus.ts 的时候，通过自定义一个 bus 对象，来挂载 mitt 的 API 。
在 bus.ts 里，改成以下代码：
import mitt from 'mitt';
// 初始化一个 mitt 实例
const emitter = mitt();
// 定义一个空对象用来承载我们的自定义方法
const bus: any = {};
// 把你要用到的方法添加到 bus 对象上
bus.$on = emitter.on;
bus.$emit = emitter.emit;
// 最终是暴露自己定义的 bus
export default bus;
这样我们在组件里就可以继续使用 bus.$on 、bus.$emit 等以前的老 API 了，不影响我们旧项目的升级使用。