Vue 组件间传参最佳实践

huashiou 发布于2019-08-23 18:18 / 3320人阅读

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

1.父子组件间的数据传递 1.1从父组件获取子组件的数据

1.1.1通过绑定 props 将父组件的数据关联到子组件，并修饰 .sync 或者用 v-model 同步来自子组件的数据变化

//使用.sync ：

//父组件



//子组件

// v-model :

//父组件：



//子组件：

1.1.2绑定 listener 事件监听器，当子组件状态或者数据发生变化时，触发事件并将数据传递到父组件

$listeners 和 $attrs 两者表面层都是一个意思，$attrs 是向下传递数据，$listeners 是向下传递方法，通过手动去调用 $listeners 对象里的方法，原理就是 $emit 监听事件，$listeners 也可以看成一个包裹监听事件的一个对象。

// 父组件：



//子组件：



//孙子组件：

1.2从子组件获取父组件的数据

1.2.1 获取 props 或者 $attrs 传下来的数据

//父组件:



//子组件：



//孙子组件：

2.兄弟组件间的数据传递 处于兄弟关系的组件

2.1通过 EventBus 或者 $root 去注册事件，由兄弟组件去监听事件传递过来的数据变化

2.2 在 Vuex 存放状态，并在两个组件中都监听状态变化
2.3 在父组件上绑定状态，并通过 v-model 或者 .sync 绑定到两个兄弟组件中去，以同步数据变化

3.祖孙组件间的数据传递 3.1孙组件被直接写在了祖先组件的 template 内

在 Vue 中，处于祖孙关系的组件，而且孙组件被直接写在了祖先组件的 template 内，要从祖先组件获取孙组件的数据，有以下几种方式:

3.1.1可以在模板上给孙组件绑定 ref 并通过 $refs 调用孙组件的方法获取数据

//父组件



//子组件：



//孙子组件：

3.1.2 可以在模板上给孙组件绑定 listener 获取孙组件传过来的数据
3.1.3 可以在模板上给孙组件绑定 v-model 或者 .sync 同步孙组件的数据

3.2孙组件不在祖先组件的 template 内，要从祖先组件获取孙组件的数据

3.2.1先在子组件上绑定 v-model 或者 .sync，接着再在子组件的模板上通过 v-model 或者 .sync 绑定孙组件，以同步孙组件的数据
3.2.2现在孙组件上绑定 listener，再给子组件绑定 listener，数据由事件层层上传给祖先组件

3.3孙组件在祖先组件的 template 内，要从孙组件获取祖先组件的数据

3.3.1直接在祖先组件的 template 中通过 v-bind 将数据传递到孙组件中，孙组件通过 props 或者 $attrs 进行接收

3.4孙组件不在祖先组件的 template 内，要从孙组件获取祖先组件的数据

3.4.1先在子组件上 v-bind 绑定数据，接着再在子组件上通过 v-bind 绑定孙组件，数据层层向下传递
3.4.2孙组件在 EventBus 中注册事件，监听来自祖先组件触发的事件数据
3.4.3祖先组件将数据挂到 Vuex 中，再由孙组件从 Vuex 中去获取数据

专线服务混合云最佳实践 webrtc最佳实践 cdn最佳实践 vpc最佳实践

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

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

React Native 传参的五种方式

摘要：在中由于业务的需要我们往往要在诸多的页面间，组件之间做一些参数的传递与管理在这里我总结了几大经过验证，稳定好用的方式给大家导航传值推荐指数适用范围相邻页面间传值兼容性原理为页面的上挂载了对象可用来做路由跳转，在做页面跳转时可以携带参数回调方在React Native 中由于业务的需要, 我们往往要在诸多的页面间，组件之间做一些参数的传递与管理, 在这里我总结了几大经过验证，稳定好用的...

cnTomato 2019-08-26 13:52 评论0 收藏0
Vue2从0到1(四)：Vue组件化及组件间传值

摘要：前面讲了环境的搭建用打包和的使用以及的使用下面讲一下组件化及组件间传值主要包括父子组件间传值，兄弟组件间传值，不相关组件间传值。组件化及组件间传值组件化组件是最强大的功能之一。前面讲了环境的搭建用webpack打包vue和Vue-router的使用以及vuex的使用下面讲一下Vue组件化及组件间传值：主要包括父子组件间传值，兄弟组件间传值，不相关组件间传值。 10.Vue组件...

geekzhou 2019-08-21 17:04 评论0 收藏0
Vue 组件间传值

摘要：前言作为现在比较火的框架之一，相信您在使用的过程中，也会遇到组件间传值的情况，本文将讲解几种组件间传值的几种方法，跟着小编一起来学习一下吧实现注意学习本文，需要您对有一定的了解。为了便于讲解，以下方法均假设父组件是，子组件是，兄弟组件是。前言 Vue 作为现在比较火的框架之一，相信您在使用的过程中，也会遇到组件间传值的情况，本文将讲解几种 Vue 组件间传值的几种方法，跟着小编一起来...

VishKozus 2019-08-23 15:07 评论0 收藏0
vue 组件间传值

摘要：父组件给子组件传值父组件二哈子组件子组件给父组件父组件子组件点击啦啦啦啦定义状态中引入传值取值地址传值 1、父组件给子组件传值父组件： import child from ./child.vue export default { components: {child}, data(){ return {name:二哈} } ...

sourcenode 2019-08-23 14:02 评论0 收藏0
[MUI] mui框架实现页面间传值

摘要：参考通过本地储存特性检测参考利用传参在页面跳转的时候通过设置添加参数，在接收参数的页面通过获取参数字符串。发送参数的页面接收参数的页面获取中的参数获取中的参数其他参考资料页面传参终极版青峰专栏博客频道本文地址 1 ：通过MUI封装的openWindow 方法: mui.openWindow({ url:new-page-url, id:new-page-id, ...

刘永祥 2019-08-29 12:33 评论0 收藏0