vue Bus使用

vue中关于兄弟组件bus的使用方法

首先，bus可以用在任何组件之间的传值

废话不多说，请看下面代码解说

注：本文只讲解全局引入方法

全局引入：

在main.js中使用beforeCreate方式引入bus

// main.js中
new Vue({
  render: h => h(App),
  // 引入bus
  beforeCreate(){
    Vue.prototype.$bus = this
  }
}).$mount('#app')

引入完成后就可以创建文件了

1. 创建一个Bus目录，在目录内创建一个Bus.vue公共文件

// Bus.vue
<template>
  <div>
    <DemoOne />
    <DemoTwo />
  </div>
</template>
<script>

import DemoOne from "../components/DemoOne.vue";
import DemoTwo from "../components/DemoTwo.vue";
export default {
  name: 'Bus',
  components: {
    DemoOne,DemoTwo
  },
}
</script>
<style lang="less" scoped>

</style>

2. 创建第一个兄弟组件DemoOne.vue

// DemoOne.vue
<template>
  <div>
    <h1 @click="one">{{ msg }}</h1>
  </div>
</template>
<script>

export default {
  name: 'DemoOne',
  data() {
    return {
      msg: '我是demo1',
      nu: 11111111
    }
  },
  methods: {
    one() {
    // 使用$emit发送
      this.$bus.$emit("busevnet", this.nu)
    }
  },
  mounted() {
    // 使用$on接收
    this.$bus.$on("t", (data) => {
      this.msg = data;
    });
  },
    // 最后一定要在beforeDestroy中将接收的值销毁
  beforeDestroy() {
    this.$bus.$off('t')
  }
}
</script>
<style lang="less" scoped></style>

3. 创建第二个兄弟组件DemoTwo.vue

// DemoTwo.vue
<template>
    <div>
        <h1 @click="two">{{ msg }}</h1>
    </div>
</template>
<script>
export default {
    name: 'DemoTwo',
    data() {
        return {
            msg: '我是demo2',
            t: 2222222
        }
    },
    methods: {
        two() {
     // 使用$emit发送
            this.$bus.$emit("t", this.t)
        }
    },
    mounted() {
     // 使用$on接收
        this.$bus.$on("busevnet", (data) => {
            this.msg = data;
        });
    },
    // 在beforeDestroy中将接收的值销毁
    beforeDestroy() {
        this.$bus.$off('busevent')
    }
}
</script>
<style lang="less" scoped></style>

总结：

1、$on和$emit第一个参数一定得是一样的。

2、在要传值的组件页面中用$emit，在要拿到值的兄弟组件页面中用$on。

3、最后在beforeDestroy中销毁