组件间通信方式,vue的通信方式
vue。j中一个很重要的知识点是组件通信，不管是业务类的开发还是组件库开发，都有各自的通讯方法，下面这篇文章主要给大家介绍了关于Vue3常用的通讯方式的相关资料，需要的朋友可以参考下
目录
前言props $ emitEventBusv-model expose/ref provide/inject插槽狭槽普通插槽具名插槽作用域插槽结语
前言
Vue3更新了很久了，但是之前项目都是用Vue2写的，最近去官网看了一波，在这里总结一下Vue3常用的通讯方式。
尤大大，不要再更新了，真的学不动了。
本文用的是Vue3.2版本的设置语法糖官网
props
父组件
模板
差异
Child :msg=msg :obj=obj /
/div
/模板
脚本设置
从“vue”导入{参考，反应}
//Vue3.2版本设置语法糖引入组件不需要注册便可以使用组件
从导入子级 child.vue
const msg=ref(一只豆豆)
//传递复杂类型数据
const obj=reactive({name:豆豆})
/脚本
子组件
模板
分区/分区
/模板
脚本设置
//Vue3.2版本设置语法糖定义方案不需要引入可以直接使用
const props=defineProps({
消息：{
类型：字符串，
默认值：""
},
目标
类型：对象，
默认值：()={}
}
})
console.log(msg ，props。味精)；//一只豆豆
console.log(obj ，props。obj。姓名)；//豆豆
/脚本
$emit
父组件
模板
差异
Child @myClick=myClick /
/div
/模板
脚本设置
从“vue”导入{参考，反应}
从导入子级 child.vue
const myClick=val={
console.log(val ，val)；//发出传递信息
}
/脚本
子组件
模板
差异
button @click=handleClick 单击我/按钮
/div
/模板
脚本设置
//Vue3.2版本设置语法糖定义限制不需要引入可以直接使用
const emit=define发出([ my click ])//如果有多个发射事件可以往数组后边添加即可
const handleClick=()={
发出( myClick ，发出传递信息)
}
/脚本
EventBus
在Vue3中就没有事件总线了，可以使用米特。射流研究…来替代
安装
$ npm安装-保存手
bus.js
从“米特”导入手
导出默认手套()
兄弟组件一个发射器触发
模板
差异
button @click=handleClick 单击我/按钮
/div
/模板
脚本设置
从导入总线。/总线
const handleClick=()={
bus.emit(foo ，豆豆)
}
/脚本
兄弟组件b开接收
模板
分区/分区
/模板
脚本设置
从导入总线。/总线
bus.on(foo ，e={
console.log(e ，e) //豆豆
})
/脚本
v-model
Vue2版本是可以通过修饰符。同步让子组件修改父组件的值，但是Vue3就取消这个修饰符，融合到v型车里边去了
父组件
模板
差异
div{{ name }}/div
div{{ age }}/div
子虚拟模型：name=name 虚拟模型：age=age /
/div
/模板
脚本设置
从导入子级 child.vue
从“vue”导入{ ref }
const name=ref(豆豆)
const age=ref(20)
/脚本
子组件
模板
差异
分区/分区
button @click=handleChange 单击我/按钮
/div
/模板
脚本设置
//更新：名称这样写在安慰里面就不会有告警了
const emit=define发出([ update:name ， update:age])
const handleChange=()={
发出(更新：名称,一只豆豆)
发出(更新：年龄,18)
}
/脚本
expose / ref
子组件通过揭露暴露属性和方法出去
父组件通过裁判员来获取子组件的值和调用方法
父组件
模板
差异
Child ref=myRef /
button @click=handleClick 单击我/按钮
/div
/模板
脚本设置
从导入子级 child.vue
从“vue”导入{ ref }
const myRef=ref(null)
const handleClick=()={
console.log(myRef ，myRef.value.name) //豆豆
myRef.value.fn() //一只豆豆
}
/脚本
子组件
模板
差异
分区/分区
/div
/模板
脚本设置
//Vue3.2版本设置语法糖定义展示不需要引入可以直接使用
defineExpose({
名称： 豆豆，
fn () {
console.log(一只豆豆)
}
})
/脚本
provide / inject
提供/注入可以给后代组件传参，嵌套多少层都没问题
父组件
模板
差异
孩子/
/div
/模板
脚本设置
从导入子级 child.vue
从“vue”导入{参考，提供}
const name=ref(豆豆)
提供(姓名，名称)
/脚本
后代组件
模板
差异
差异后代组件name {{ name }}/div
/div
/模板
脚本设置
从“vue”导入{注入}
const name=inject(name )
console.log(name ，name.value) //豆豆
/脚本
Vue2使用提供/注入传递数据不是响应式的，所以只能通过传递一个对象数据才能变成响应式
Vue3使用提供/注入传递数据就是响应式了，这就很便捷
插槽 slot
普通插槽
父组件
模板
差异
儿童豆豆/孩子
/div
/模板
脚本设置
从导入子级 child.vue
/脚本
子组件
模板
差异
插槽/插槽
/div
/模板
脚本设置/脚本
具名插槽
模板
差异
儿童
豆豆
模板#名称
差异
按钮一只豆豆/按钮
/div
/模板
/孩子
/div
/模板
脚本设置
从导入子级 child.vue
/脚本
子组件
模板
差异
//普通插槽
插槽/插槽
//具名插槽
插槽名称=名称/插槽
/div
/模板
脚本设置/脚本
效果图
作用域插槽
父组件
模板
！-v-slot="{ scope } "子组件返回的每一项数据-
子v-slot="{ scope }":arr="arr "
div class=box
差异名字：{{ scope.name }}/div
差异年龄：{{ scope.age }}/div
差异爱好：{{ scope.like }}/div
/div
/孩子
/模板
脚本设置
从“vue”导入{反应性}
从导入子级 child.vue
const arr=reactive([
{姓名： 张三，年龄：18,喜欢：篮球 },
{姓名： 李四，年龄：19,喜欢：排球 },
{姓名： 王五，年龄：20,喜欢：足球 }
])
/脚本
style lang=less 。方框{
显示：内嵌-块；
宽度：200像素
边框：虚线蓝色1px
右边距：15px
填充：10px
}
/风格
子组件
模板
差异
！- :scope=item 返回每一项-
slot v-for= item in arr :scope= item /
/div
/模板
脚本设置
const props=defineProps({
arr: {
类型：数组，
默认值：()=[]
}
})
/脚本
效果图
结语
到此这篇关于Vue3常用的通讯方式的文章就介绍到这了，更多相关Vue3通讯方式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。