详解Vue中组件传值的多重实现方式


Posted in Javascript onAugust 16, 2019

vue中组件传值方式整理

1.我们最熟悉的父子组件传值

父->子 props
 子->父 $emit

这些我们最常用的就不说了,如果有不理解的,俺这儿有篇不错的文章,链接奉上~

https://www.cnblogs.com/LoveAndPeace/p/7273648.html

2.兄弟组件或无关系组件之间的传值

我们最常用的方式采用一个第三方变量 俗称eventbus
  通过其中一个$emit发另一个$on接收的方式 实现组件传值
  
  main.js中挂载一下

详解Vue中组件传值的多重实现方式

在其中一个页面$emit

详解Vue中组件传值的多重实现方式

另一个页面$on

详解Vue中组件传值的多重实现方式

是不是有点像昨天我写的pubsub呢?哈哈哈哈哈

3.attr和listener进行传值(注意,这两种只能向下传递)

父组件里的子组件上写上你要传递的键名键值,

详解Vue中组件传值的多重实现方式

子组件里通过{{$attrs}}拿到你所有传递的值

详解Vue中组件传值的多重实现方式

这样直接就拿到了,是不是很神奇~

效果:

详解Vue中组件传值的多重实现方式

子组件里通过{{$attrs}}拿到你所有传递的值

子组件下边还有组件 可以用v-bind:"$attrs"传递,在孙子组件中通过{{$attrs}}

详解Vue中组件传值的多重实现方式

listener用来传递事件,用法大致一个样

详解Vue中组件传值的多重实现方式

我们设置一个点击事件

在子元素中↓我们console下,看看拿到没有

详解Vue中组件传值的多重实现方式

详解Vue中组件传值的多重实现方式

再笼统的概述下
  vue中 listeners事件传递
父组件里的子组件上写个函数 比如@log="log",在当前页的methods:{}里对应上执行的语句
子组件触发的话里写个触发事件,如click="aaa" 
methods写法:
methods:{
 aaa(){
  this.$listeners.你父组件的那个方法 这里是this.$listeners.log()调用
 }
}

子组件下还有组件的话 用v-on:"$listeners"再往下传
下面继续用子组件获取的方法获取

4.采用ref的方式 有点react父传子的亚子

but!也不太一样 ,在你父组件引入的子组件上写个ref="xxx",你父组件便拿到了一系列子组件的东西,比如数据,事件等↓

详解Vue中组件传值的多重实现方式

详解Vue中组件传值的多重实现方式

5.用vuex 就不用说了吧 数据集中起来,每个页面值都能相互拿到

state里设置值

通过stor.state.值拿到值

通过commit 或者dispatch往mutations和actions里提交可以做数据对应处理等等....

6.通过provide设置,inject取值但是这种方式不建议用

举个栗子:

详解Vue中组件传值的多重实现方式

另一个组件

详解Vue中组件传值的多重实现方式

搞定~ 这是整理的一些组件传值的方法,初来乍到许多写文的格式不太会调,大家凑合看

总结

以上所述是小编给大家介绍的Vue中组件传值的多重实现方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript 组件之旅(四):测试 JavaScript 组件
Oct 28 Javascript
JS上传前预览图片实例
Mar 25 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
Jul 31 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
js中的getAttribute方法使用示例
Aug 01 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
使用jquery操作session方法分享
Jan 22 Javascript
Javascript中For In语句用法实例
May 14 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
JavaScript模拟实现自由落体效果
Aug 28 Javascript
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 #Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 #Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 #Javascript
基于vue写一个全局Message组件的实现
Aug 15 #Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 #Javascript
解决vuex刷新状态初始化的方法实现
Aug 15 #Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 #Javascript
You might like
PHP中Session的概念
2006/10/09 PHP
用php+mysql一个名片库程序
2006/10/09 PHP
解析PHP中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
php实现无限级分类
2014/12/24 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
[46:00]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第一局
2016/03/03 DOTA
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
python两种遍历字典(dict)的方法比较
2014/05/29 Python
跟老齐学Python之永远强大的函数
2014/09/14 Python
python中sys.argv参数用法实例分析
2015/05/20 Python
Python中的super()方法使用简介
2015/08/14 Python
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
python实现简单socket通信的方法
2016/04/19 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
如何通过python实现全排列
2020/02/11 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
个人自荐信
2013/12/05 职场文书
财务部经理岗位职责
2014/02/03 职场文书
《影子》教学反思
2014/02/21 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
同乡会致辞
2015/07/30 职场文书
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技