Vue3常用的通讯方式总结与实例代码

目录

• 前言
• props
• $emit
• EventBus
• v-model
• expose / ref
• provide / inject
• 插槽 slot
• 普通插槽
• 具名插槽
• 作用域插槽
• 结语

前言

Vue3更新了很久了，但是之前项目都是用Vue2写的，最近去官网look了一波，在这里总结一下Vue3常用的通讯方式。
尤大大，不要再更新了，真的学不动了。

本文用的是Vue3.2版本的setup语法糖官网

props

父组件

子组件

$emit

父组件

子组件

EventBus

在Vue3中就没有EventBus了，可以使用mitt.js来替代
安装

$ npm install --save mitt

bus.js

    import mitt from 'mitt'
    export default mitt()

兄弟组件A emit触发

兄弟组件B on接收

v-model

Vue2版本是可以通过修饰符.sync让子组件修改父组件的值，但是Vue3就取消这个修饰符，融合到v-model里边去了

父组件

子组件

expose / ref

子组件通过 expose 暴露属性和方法出去
父组件通过 ref 来获取子组件的值和调用方法

父组件

子组件

provide / inject

provide / inject 可以给后代组件传参，嵌套多少层都没问题

父组件

后代组件

Vue2使用 provide / inject 传递数据不是响应式的，所以只能通过传递一个对象数据才能变成响应式
Vue3使用 provide / inject传递数据就是响应式了，这就很便捷

插槽 slot

普通插槽

父组件

子组件

具名插槽

子组件

效果图

作用域插槽

父组件

子组件

效果图

结语

到此这篇关于Vue3常用的通讯方式的文章就介绍到这了,更多相关Vue3通讯方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！