vue.js - vue2.0中，event bus如何使用？

问题描述

问 题

我想使用event bus方法，通过在Banana.vue组件中更改值到Apple.vue组件中，但是在Apple.vue组件中appleTotal值没有改变。求指导。
App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <Apple></Apple>
    <Banana></Banana>

  </div>
</template>

<script>
  import Apple from './components/Apple.vue'
  import Banana from './components/Banana.vue'

  export default {
    name: 'app',
    components: {
      Apple,
      Banana
    }
  }
</script>


Apple.vue

Banana.vue组件
<template>
  <div>
    <h1>{{msg}}</h1>
    <div>
      <button @click="aa">Add Banana</button>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import bus from '../bus'

  export default{
    data () {
      return {
        msg: 'i am banana component',
        total: 0
      }
    },
    methods: {
      aa: function () {
        bus.$emit('aa', this.total++)
      }
    }
  }
</script>

解决方案

bus.$on 你怎么放到计算属性里了。 放在 created 钩子里

这篇关于vue.js - vue2.0中，event bus如何使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！