栏目分类:
子分类:
返回
文库吧用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
文库吧 > IT > 软件开发 > Web开发 > Vue.js

聊一聊VUE组件间的数据传递

Vue.js 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

聊一聊VUE组件间的数据传递

众所周知,Vue 是基于组件来构建 web 应用的。组件将模块和组合发挥到了极致。Vue 是虽说吸取了 AngularJs 的 MVVM的思想,但是它是单向数据流的,也就是说子组件无法直接改变父组件状态。下面总结出常用的组件消息传递的方式。

父组件向子组件传递数据

该方式的数据传递是遵循 Vue 单向数据流的规则的,因此使用起来十分的自然。若父组件的数据改变子组件的 UI 展现也随之变化。
Parent.vue


Child.vue


效果如下:

子组件修改父组件的数据

这里介绍两种方式:

1、子组件触发事件,父组件监听事件做出数据改变

2、父组件将数据变更方法以 props 的形式传给子组件(借鉴 react 的父子通信方式)

监听事件

父组件上通过 v-on 监听子组件所触发的事件。
EventParent.vue


EventChild.vue


效果如图:

传递props

因为自己写 react 较多,所以好奇 Vue 是否支持子组件回调父组件的事件处理函数,试了一下是可以的。好像 Element UI 使用该方式较多。个人认为该方法和事件方式同样灵活。
Parent.vue


Child.vue



以 props 的这种方式大家可以尝试实现一下是一种新的思路。

非父子组件间的通信

上述三个实例都在讲述父子组件的通信,那么不相关的组件该如何通信呢?可以创建一个 Vue 的实例作为桥来中转事件。
Child01.vue


Child02.vue


效果如图:

总结

父组件改变子组件的数据利用正常单向数据流的特性即可,子组件改变父组件的数据可以通过事件或者函数 props 两种方式实现,非父子组件通信则利用 EventHub 中转一下。

实例代码

欢迎大家指正批评、或留言。

转载请注明:文章转载自 www.wk8.com.cn
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 wk8.com.cn

ICP备案号:晋ICP备2021003244-6号