Question

我正在构建的Web应用程序具有两种不同的状态。我想在其中一种状态下具有一个按钮，该按钮可以切换到另一种状态，并通过事件总线修改其某些子项（通过ref）。问题是，我不知道如何在收到事件后如何“等待”初始化引用。

在已安装的事件处理程序中注册该事件处理程序不起作用，因为在卸载该组件后，它仍将监听事件。我想接收一个事件，切换状态，等到引用被渲染（理想情况下是用生命周期钩子之类的东西）再对引用做点什么。

js

const EventBus = new Vue();

Vue.component('compa', {
    mounted: function(){
    //this is the part that is broken
    EventBus.$on('swap-to-a', () => console.log(this.$refs))
  },
  template: `<p ref = "reference">in state a</p>`
})

Vue.component('compb', {
  methods: {
    emit: () => {EventBus.$emit('swap-to-a')}
  },
  template: `<button v-on:click = "emit">swap to a</button>`
})

new Vue({
  el: "#app",
    mounted: function(){
    EventBus.$on('swap-to-a', () => this.mode = "a");
  },
  data: {
    mode: "b"
  }
})

html

<div id="app">
  <button v-on:click = "mode ='b'">
  swap to b  
  </button>
  <template v-if = "mode=='a'">
    <compa></compa>
  </template>
  <template v-if = "mode=='b'">
    <compb></compb>
  </template>
</div>

具有模板和单独组件的Vue事件总线

0 个答案: