Vue中组件传值的多重实现方式·~

2019-08-16 admin

vue中组件传值方式整理

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

     父->子  props
     子->父  $emit
    

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

     https://www.cnblogs.com/LoveAndPeace/p/7273648.html
    
    
  • 2.兄弟组件或无关系组件之间的传值

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

    图片描述

       在其中一个页面$emit 
    

    图片描述

     另一个页面$on
    

    图片描述

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


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

图片描述 我们设置一个点击事件

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

图片描述 图片描述

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

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

  • 4.采用ref的方式 有点react父传子的亚子 but!也不太一样 ,在你父组件引入的子组件上写个ref=“xxx”,你父组件便拿到了一系列子组件的东西,比如数据,事件等↓ 图片描述

图片描述

  • 5.用vuex 就不用说了吧 数据集中起来,每个页面值都能相互拿到 state里设置值 通过stor.state.值拿到值

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

  • 6.通过provide设置,inject取值但是这种方式不建议用 举个栗子: 图片描述

另一个组件 图片描述


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

[转载]原文链接:https://segmentfault.com/a/1190000020086987

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72631.html

文章标题:Vue中组件传值的多重实现方式·~

相关文章
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
请前往任务中心完善资料即可激活会员
登录后,点击右上角的用户名,在下拉菜单中可以进去“我的任务” 注册自动激活,本站没有VIP!没有充值!没有推广任务等等 回复即可下载 ...
2015-11-18
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
2017-03-13
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
回到顶部