VUE 兄弟组件传值

黎轩栀海

已于 2023-02-24 14:50:03 修改

阅读量6.6k

点赞数 5

分类专栏：前端前端框架小领地文章标签： vue.js javascript 前端

于 2023-02-24 14:27:26 首次发布

原文链接：https://www.jb51.net/article/257420.htm

版权

前端同时被 2 个专栏收录

154 篇文章 6 订阅

订阅专栏

前端框架小领地

22 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue中通过创建一个bus.js文件作为事件总线，利用$emit和$on方法实现兄弟组件之间的数据传递。在父组件中注册子组件，然后在各自子组件中引入bus并监听或触发事件来达到通信目的。例如，testB组件通过bus向testA组件发送数据，testA组件则通过$on监听并接收数据。

摘要由CSDN通过智能技术生成

兄弟组件之间的传值和父子组件之间的传值非常相似，都是通过$emit;

原理是：vue一个新的实例，类似于一个站，连接着两个组件，也就是一个中央事件总线；

1.在项目中创建一个bus.js文件,暴露一个vue实例

import Vue from 'vue';

export default new Vue;

2.在父组件中注册两个子组件testA、testB

<template>
  <div class="pre-wrap">
    <test-a></test-a>
    <test-b></test-b>
  </div>
</template>

<script>
import TestA from '../../../components/commiss/testA.vue';
import TestB from '../../../components/commiss/testB.vue';
export default {
  components: { TestA, TestB, },
}

3.在两个子组件中分别引入bus

import bus from '../../common/config/bus';

4.testB组件传值给testA组件：(传值使用$emit)

testA组件接收到testB组件的值：(接收值使用$on)

testA.vue子组件

<template>
  <div>
    <div>我是testA{{myList}}</div>
    <div @click="clear()">清空</div>
  </div>
</template>

<script>
import bus from '../../common/config/bus';
export default {
  components: {},
  data() {
    return {
      myList: [],
    };
  },

  mounted() {
    bus.$on('sendList', data => {
      this.myList = data;
    })
  },

  methods: {
    clear() {
      this.myList=[];
      bus.$emit('sendList', this.myList);
    },
  },
}

</script>

testB.vue子组件

<template>
  <div style="color:red; border-top:1px solid #333;">
    <div>{{list}}</div>
    <div @click="clickHandle()">B事件</div>
  </div>
</template>

<script>
import bus from '../../common/config/bus';
export default {
  components: {},
  data () {
    return {
      list:[],
    };
  },

  mounted() {
    bus.$on('sendList', data => {
      this.list = data;
    })
  },

  methods: {
    clickHandle(){
      this.list.push('a')
      bus.$emit('sendList',this.list);
    },
  },

}
</script>

到这里其实使用bus总线实现兄弟组件之间的传值已经完成。

演示结果如下: