首页 ›  文章

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

2019-08-16

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取值但是这种方式不建议用 举个栗子: 图片描述

另一个组件 图片描述


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

原文链接:segmentfault.com

上一篇:Vue+element ui 中的table表格和分页组件实现分页效果
下一篇:编写可维护的前端代码
相关文章

首次访问,人机识别验证

扫描下方二维码回复 1024 获取验证码,验证完毕后 永久 无须验证

操作步骤:[打开微信]->[扫描上侧二维码]->[关注 FedJavaScript 的微信] 输入 1024 获取验证码

验证码有误,请重新输入