详解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创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
Sep 21 Javascript
node.js中的buffer.toJSON方法使用说明
Dec 14 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
AngularJs表单验证实例详解
May 30 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
详解百度百科目录导航树小插件
Jan 08 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 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基础学习小结
2011/04/17 PHP
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
ajax 缓存 问题 requestheader
2010/08/01 Javascript
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
React路由管理之React Router总结
2018/05/10 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
Python程序中的观察者模式结构编写示例
2016/05/27 Python
python基础教程之Filter使用方法
2017/01/17 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
python实现串口自动触发工作的示例
2019/07/02 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
Python 实现微信自动回复的方法
2020/09/11 Python
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
幼儿园实习自我鉴定
2013/12/15 职场文书
专业技术职务聘任书
2014/03/29 职场文书
党建工作先进材料
2014/05/02 职场文书
考试没考好检讨书
2015/05/06 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android