Vue.js - 动态组件和事件

Question

我想知道如何处理dynamic components和events使用vue-js 2.3.

就说组件home $emit('eventFromHome')和组件archives $emit('eventFromArchives')

有什么方法可以抓住他们<component></component>？是否存在比临时解决方案更好/更好的方法？

动态组件

var vm = new Vue({
  el: '#example',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

<component v-bind:is="currentView"></component>

静态组件

var vm = new Vue({
  el: '#example',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

<home v-on:eventFromHome=""></home>
<archive v-on:eventFromArchive=""></archive>

临时答复

<component 
    v-bind:is="currentView"
    v-on:eventFromHome=""
    v-on:eventFromArchive="">
</component>

Answer 1

自 Vue.js 2.4 起，具有允许动态事件绑定的v-on对象语法。

这样，解决方案就更加优雅了：

var vm = new Vue({
  el: '#example',
  data: {
    currentView: {
      component: 'home',
      events: {}, // <-- put listeners here
    }
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

<component v-bind:is="currentView.component" v-on="currentView.events"></component>