vue中bus的使用

新建一個bus.js文件,並在main.js引入並全局使用它

import Vue from 'vue' const bus = new Vue({ data: { number: 1 } }) export default { install() { Object.defineProperty(Vue.prototype, '$bus', { value: bus }); } }

 

bus.vue組件,父組件派發事件,累加bus中number的值

<template>
  <div class="sdktest">
    <ul>
      <li class="sdktest-item" @click="addNum">父組件派發事件----點擊增加bus(number)------{{ $bus.number }}</li>
      <bus-child></bus-child>
    </ul>
  </div>
</template>

<script> import BusChild from './components/bus-child' export default { name: "index", components: { BusChild }, methods: { addNum() { this.$bus.$emit('addNum',this.$bus.number++); } } } </script>

<style scoped> .sdktest { overflow: hidden; background-color: #fff; font-size: 36px; } .sdktest-item { width: 560px; /*height: 80px;*/ margin: 40px auto; border: 1px solid #eee; border-radius: 10px; background-color: #3ec7e7; color: #fff; text-align: center; line-height: 80px; } .sdktest-item:nth-child(2n) { background-color: #42cd56; } </style>

 

bus-child組件,子組件監聽事件,監聽bus中number的值

<template>
  <div class="sdktest">
    <ul>
      <li class="sdktest-item">子組件監聽事件---number：{{ $bus.number}}</li>
    </ul>
  </div>
</template>

<script> export default { name: "bus-child", mounted() { this.$bus.$on('addNum',(payload) => { console.log(payload); }); } } </script>

<style scoped> .sdktest { overflow: hidden; background-color: #fff; font-size: 36px; } .sdktest-item { width: 560px; height: 80px; margin: 40px auto; border: 1px solid #eee; border-radius: 10px; background-color: #3ec7e7; color: #fff; text-align: center; line-height: 80px; } .sdktest-item:nth-child(2n) { background-color: #42cd56; } </style>

 

頁面展示

 

 

 

 

局部使用,不注冊在全局

在頁面目錄下建一個bus.js文件,該文件只導出一個空的不掛載的vue實例

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

 

在同一目錄下建一個index.vue組件，該組件引入bus，然后利用bus.$emit方法派發事件

<template>
  <div class="sdktest">
    <ul>
      <li class="sdktest-item" @click="add">(父組件)點擊</li>
      <middle-child></middle-child>
    </ul>
  </div>
</template>

<script> import bus from './bus.js' import MiddleChild from './components/middle-child' export default { name: "index", data() { return { num: 1 }; }, components: { MiddleChild }, methods: { add() { bus.$emit('add', this.num++); } } } </script>

<style scoped> .sdktest { overflow: hidden; background-color: #fff; font-size: 36px; } .sdktest-item { width: 560px; /*height: 80px;*/ margin: 40px auto; border: 1px solid #eee; border-radius: 10px; background-color: #3ec7e7; color: #fff; text-align: center; line-height: 80px; } .sdktest-item:nth-child(2n) { background-color: #42cd56; } </style>

 

建一個middle-child.vue子組件,監聽父組件派發過來的事件

<template>
  <div class="sdktest">
    <ul>
      <li class="sdktest-item">子組件監聽------{{ num }}</li>
    </ul>
  </div>
</template>

<script> import bus from '../bus.js' export default { name: "index", data() { return { num: 0 }; }, mounted() { bus.$on('add',(payload) => { this.num = payload; }); } } </script>

<style scoped> .sdktest { overflow: hidden; background-color: #fff; font-size: 36px; } .sdktest-item { width: 560px; /*height: 80px;*/ margin: 40px auto; border: 1px solid #eee; border-radius: 10px; background-color: #3ec7e7; color: #fff; text-align: center; line-height: 80px; } .sdktest-item:nth-child(2n) { background-color: #42cd56; } </style>

 

頁面展示