Vue.js中一个很重要的知识点是组件通信,不管是业务类的开发还是组件库开发,都有各自的通讯方法,下面这篇文章主要给大家介绍了关于Vue3常用的通讯方式的相关资料,需要的朋友可以参考下
前言
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里边去了
父组件
{{ name }}{{ age }}
子组件
expose / ref
子组件通过 expose 暴露属性和方法出去
父组件通过 ref 来获取子组件的值和调用方法
父组件
子组件
provide / inject
provide / inject 可以给后代组件传参,嵌套多少层都没问题
父组件
后代组件
后代组件name {{ name }}
Vue2使用 provide / inject 传递数据不是响应式的,所以只能通过传递一个对象数据才能变成响应式
Vue3使用 provide / inject传递数据就是响应式了,这就很便捷
插槽 slot
普通插槽
父组件
豆豆
子组件
具名插槽
豆豆
子组件
// 普通插槽// 具名插槽
效果图
作用域插槽
父组件
名字:{{ scope.name }}年龄:{{ scope.age }}爱好:{{ scope.like }}
子组件
效果图
结语
到此这篇关于Vue3常用的通讯方式的文章就介绍到这了,更多相关Vue3通讯方式内容请搜索0133技术站以前的文章或继续浏览下面的相关文章希望大家以后多多支持0133技术站!
以上就是Vue3常用的通讯方式总结与实例代码的详细内容,更多请关注0133技术站其它相关文章!