温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue中组件间通信的方式有哪些

发布时间:2022-01-21 15:54:16 来源:亿速云 阅读:143 作者:iii 栏目:开发技术

今天小编给大家分享一下Vue中组件间通信的方式有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

父子组件

props/event

子组件有时需要与父组件进行沟通,沟通的方式就是子组件 $emit 传递一个自定义事件,父组件通过监听这个事件来做进一步动作。而父组件与子组件通信则使用 props来传递一个绑定在子组件上的属性,这个属性值来源于父组件。

parent/children

父组件中使用 $children 操作子组件。并在父组件通过 $children 访问到已经在在父组件当中引入了的子组件, $children 返回的是子组件列表,是一个数组。

子组件中子组件可通过 $parent 来访问父组件里的数据和定义的方法,如修改父组件中的$data。

ref

父组件中可为子组件定义一个ref属性,然后父组件里通过$ref[对象子组件上定义的属性名来访问子组件里的数据

provide/inject

适用于祖先和后代关系的组件间的通信,祖先元素通过 provide 提供一个值,后代元素则通过 inject 获取到这个值。这个值默认是非响应的,如果是对象那么则是响应式的:

兄弟组件

bus

在Vue . 2.x 中, 推荐使用一个空的Vue 实例作为中央事件总线( bus ),也就是一个中介。

通信的组件必须都引入这个实例例。

通过bus.$emit() 传递出一个自定义事件

在需要进行操作的组件里,通过bus.$on 监听这个自定义事件, 进行操作。

Vuex

Vuex 是Vue推出的状态管理工具

Vuex 就是把需要共享的变量量全部存储在一个对象里面,然后将这个对象放在顶层组件中供其他组件使用。这么说吧,将vue想作是一个js⽂文件、组件是函数,那么vuex就是一个全局变量,只是这个“全局变量”包含了一些特定的规则而已。

通过$store 这个对象访问数据和调用在Vuex 里定义的公共方法。

跨级组件

bus vuex provide inject

以上就是“Vue中组件间通信的方式有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI