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 has an object syntax允许动态事件绑定(bind)。

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

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>