八种Vue组件间通讯方式合集(推荐)

2023-07-18 14:55:04 140

前言

Vue提供了各种各样的通讯,其中包括兄弟间的通讯和非兄弟间的通讯,借此机会做个总结，查阅起来方便。如果喜欢的话可以帮忙点个赞:+1:或者关注一下:yum:

1、props

目录结构

components
├──Parent.vue//父亲
├──Son1.vue//儿子1

代码结构

在父亲组件中使用儿子组件，给儿子通过:date="xxx"单向传值

儿子组件通过props接受父组件传过来的值

2、$emit

目录结构

components
├──Parent.vue//父亲
├──Son1.vue//儿子1

代码结构

子组件通过触自身的方法来触发$emit方法,再触发父组件的方法,通过回调传参的方式将修改的内容传递给父组件

父组件接受回调params参数，即爸爸需要给儿子绑定了一个自定义的事件，$on("changeNum",params)

.sync

目录结构

components
├──Parent.vue//父亲
├──Son1.vue//儿子1

代码结构

子组件通过$emit("update:xxx")发射事件

父组件通过:xxx.sync="xxx"接受参数


//这个写法是上面的替代品默认组件内部触发update:count规定写法
date=val">

v-model

目录结构

components
├──Parent.vue//父亲
├──Son1.vue//儿子1

代码结构

子组件触发的事件只能是input事件,接收props的属性名只能叫value

父组件通过v-model接收参数

value=val">
//这个写法是上面的替代品默认组件内部触发input规定写法

v-model局限只能传递一个属性如果只有一个可以使用v-model多个依然需要使用.sync

3、$parent和$children

目录结构

components
├──Parent.vue//父亲
├──Son1.vue//儿子1
├──Grandson1.vue//孙子1

代码结构

如下场景:孙子想要给爷爷传递数据,孙子需要找到爷爷身上的事件去传递$parent.$emit

儿子组件使用孙子组件

爸爸身上给孙子自定义change事件

如果层级很深那么就会出现$parent.$parent.....我们可以封装一个$dispatch方法向上进行派发

Vue.prototype.$dispatch=function$dispatch(eventName,data){
letparent=this.$parent;
while(parent){
parent.$emit(eventName,data);
parent=parent.$parent;
}
};

相同的道理，如果既然能够向上寻找父亲，就能向下寻找儿子，也可以封装一个向下派发的方法$broadcast

Vue.prototype.$broadcast=function$broadcast(eventName,data){
constbroadcast=function(){
this.$children.forEach((child)=>{
child.$emit(eventName,data);
if(child.$children){
$broadcast.call(child,eventName,data);
}
});
};
broadcast.call(this,eventName,data);
};

4、$attrs和$listeners

目录结构

components
├──Parent.vue//父亲
├──Son1.vue//儿子1
├──Grandson1.vue//孙子1

$attrs批量向下传入属性

在儿子组件中使用$attrs属性,配合v-bind可以将属性继续向下传递

注意一点：在使用$attrs的时候，如果组件中使用了props就会将属性从当前attrs移除掉

在孙子组件中使用$attrs属性,可以将属性继续向下传递

如果爸爸传递给儿子元素,儿子有三个属性用不到，孙子传递给孙子，但是不想在页面上这个属性，可以设置inheritAttrs:false

$listeners批量向下传入方法

可以在son1组件中使用$listeners属性,配合v-on可以将方法继续向下传递

孙子组件可以直接使用$listeners上的方法

5、Provide&Inject

目录结构

app.vue
components
├──Parent.vue//父亲
├──Son1.vue//儿子1
├──Grandson1.vue//孙子1

代码结构

在父级声明一个公共数据

exportdefault{
provide(){
return{vm:this};
},
};

在子组件中可以注入原理,会将数据挂载在当前实例上

注意事项:这个方法使用之后比较混乱,它一般不会在业务代码中使用,经常是在组件库或者多级通信,为了方便你可以使用provide。

6、ref

目录结构

components
├──Parent.vue//父亲
├──Son1.vue//儿子1

代码结构

ref获取的是真实的dom元素，如果放到组件上代表的是当前组件的实例。父组件中可以直接获取子组件的方法或者数据。

注意事项:ref不要重名,但是当且仅当使用v-for的时候会导致出现数组情况

7、EventBus

目录结构

main.js
components
├──Grandson1.vue//孙子1
├──Son2.vue//儿子2

代码结构

EventBus可用于跨组件通知(不复杂的项目可以使用这种方式)

Vue.prototype.$bus=newVue();

Grandson1组件和Son2相互通信

这里的儿子2组件只能使用$on来触发Grandson1组件事件

8、Vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式。

具体文档查阅

结尾

到此这篇关于八种Vue组件间通讯方式合集(推荐)的文章就介绍到这了,更多相关八种Vue组件间通讯方式合集(推荐)内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

八种Vue组件间通讯方式合集(推荐)

前言

1、props

2、$emit

.sync

v-model

3、$parent和$children

4、$attrs和$listeners

5、Provide&Inject

6、ref

7、EventBus

8、Vuex

结尾

热门推荐

随机推荐