VUE组件间的数据传递

Half 发布于2019-08-21 17:43 / 2727人阅读

摘要：是虽说吸取了的的思想，但是它是单向数据流的，也就是说子组件无法直接改变父组件状态。父组件向子组件传递数据该方式的数据传递是遵循单向数据流的规则的，因此使用起来十分的自然。

众所周知，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 的实例作为桥来中转事件。
eventHub.js

import Vue from "vue";

export default new Vue();

Child01.vue

Child02.vue

效果如图：

总结

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

实例代码

欢迎大家指正批评、或留言。QQ群：538631558

【开发环境推荐】Cloud Studio 是基于浏览器的集成式开发环境，支持绝大部分编程语言，包括 HTML5、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，无需下载安装程序，一键切换开发环境。 Cloud Studio提供了完整的 Linux 环境，并且支持自定义域名指向，动态计算资源调整，可以完成各种应用的开发编译与部署。

私有云服务器托管 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89920.html

vue组件通信全面总结

摘要：当一个组件没有声明任何时，这里会包含所有父作用域的绑定和除外，并且可以通过传入内部组件在创建高级别的组件时非常有用。写在前面组件间的通信是是实际开发中非常常用的一环，如何使用对项目整体设计、开发、规范都有很实际的的作用，我在项目开发中对此深有体会，总结下vue组件间通信的几种方式，讨论下各自的使用场景文章对相关场景预览父->子组件间的数据传递子->父组件间的数据传递兄弟...

余学文 2019-08-23 12:16 评论0 收藏0
几种常见的Vue组件间的传参方式

摘要：缺点用这种方法写出来的组件十分难维护，因为你并不知道数据的来源是哪里，有悖于单向数据流的原则拿到的是一个数组，你并不能很准确的找到你要找的子组件的位置，尤其是子组件多的时候。几种常见的Vue组件间的传参方式 Vue父子组件通讯的方法其实有很多，本文只是做一个总结，说说他们的优缺点，具体如何使用相关文档和网上大神已经总结的很多里，这里就不再说明。 1.Vuex 介绍 Vuex 是一个专...

TalkingData 2019-08-23 14:01 评论0 收藏0
Vue 组件间传参最佳实践

摘要：父子组件间的数据传递从父组件获取子组件的数据通过绑定将父组件的数据关联到子组件，并修饰或者用同步来自子组件的数据变化使用父组件子组件默认初始值是，所以是显示的关闭父组件子组件绑定事件监听器，当子组件状态或者数据发生变化时，触发事 1.父子组件间的数据传递 1.1从父组件获取子组件的数据 1.1.1通过绑定 props 将父组件的数据关联到子组件，并修饰 .sync 或者用 v-mode...

huashiou 2019-08-23 18:18 评论0 收藏0
vue学习笔记（三）

摘要：直接创建组件使用标签名组件模板，根据组件构造器来创建组件。相应的，实例也被称为父组件。而且不允许子组件直接修改父组件中的数据，强制修改会报错。一、组件（一）什么是组件组件（Component）是 Vue.js最强大的功能之一。组件可以扩展 HTML元素，封装可重用的代码组件是自定义元素（对象）。（二）创建组件的两种方式官方推荐组件标签名是使用-连接的组合词，例如：。 1、使用...

fsmStudy 2019-08-21 17:14 评论0 收藏0
vue学习笔记（三）

摘要：直接创建组件使用标签名组件模板，根据组件构造器来创建组件。相应的，实例也被称为父组件。而且不允许子组件直接修改父组件中的数据，强制修改会报错。一、组件（一）什么是组件组件（Component）是 Vue.js最强大的功能之一。组件可以扩展 HTML元素，封装可重用的代码组件是自定义元素（对象）。（二）创建组件的两种方式官方推荐组件标签名是使用-连接的组合词，例如：。 1、使用...

zsirfs 2019-08-01 17:51 评论0 收藏0