vue兄弟组件之间传递值汇总

作者: MJ 分类: vue 发布时间: 2019-04-02 09:31

vue中父传子和子传父大家肯定都滚瓜烂熟,就不说了,主要总结一下非父子之间的传递:

1:通过公共的bus

创建一个公共的bus,然后导出一个bus

bus.js

import Vue from 'vue';
export const bus = new Vue();

然后A B两个组件同时引入bus.js

import { bus } from '@/components/bus.js';

A组件$emit事件及要传的值

getBrother(){
      bus.$emit('testEvent','我是要传的值')
}

B组件接收

bus.$on('testEvent',val => {
      console.log(val);
      this.val = val;
})

当然了也可以直接引入vue-bus

$ yarn add vue-bus
$ npm install vue-bus --save

2:通过vue2.4中$attrs和$listeners

inheritAttrs:(如下图)

true: 在文档中显示自定义属性

false:在文档中不显示自定义属性,不影响$attrs使用

从上往下传递使用$attrs,从下往上传递使用$listeners,最主要的是子组件里边的这一句<Son v-bind="$attrs" v-on="$listeners" />

父组件

<template>
  <div id="app">
    <HelloWorld name="hello" v-on:mj="mj" />
    <Brother :name='name' v-on:myEvent="myListeners" />
  </div>
</template>
methods: {
    myListeners(data){
      console.log(data);
    }
  }

子组件

<template>
  <div class="brother">
    <Son v-bind="$attrs" v-on="$listeners" />
  </div>
</template> 

孙组件

<template>
  <div class="son">
    {{$attrs.name}}
    <button @click="chuanVal">123</button>
  </div>
</template> 
methods: {
    chuanVal(){
      this.$emit('myEvent','11111111111')
    }
  }

3:通过props一级一级的传,父传子 –> 子传孙 ,这种也是能实现,但是也不推荐的,层级少了可以,多了就会很难看也很难理解,就不细说了。

4:通过vuex来传递也可以实现功能,但是如果项目没有很大,使用vuex有点大材小用,这里也不细说了,大家可以去看官方文档。

补充:

5:provide(生产者)和inject(注入)

父组件来生产(provide )数据,子组件通过注入( inject )来消费数据,感觉跟react里边新版的React.createContext很像,一个生产者一个消费者,来跨组件传递数据。

父组件:

provide(){
    return{
      showName:function(){
        console.log("父组件数据!!!!!!!!!!!!!!!!");
      }
    }
  }

子组件:

inject: ['showName'],
  created () {
    console.log(this.showName());
}

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注