• 35648

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

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

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0816/106527.html 1190000020086987

duang~ 我来了

vue中组件传值方式整理

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

     父->子  props
     子->父  $emit

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

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

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

    图片描述

       在其中一个页面$emit 

    图片描述

     另一个页面$on

    图片描述

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

  • 3.attr和listener进行传值(注意,这两种只能向下传递)
    父组件里的子组件上写上你要传递的键名键值,
    图片描述
    子组件里通过{{$attrs}}拿到你所有传递的值
    图片描述
    这样直接就拿到了,是不是很神奇~
    效果:
    图片描述
    子组件里通过{{$attrs}}拿到你所有传递的值

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


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

另一个组件
图片描述


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

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!