通过 Vuejs 路由器将 @EventListener 传递给组件答案

【问题标题】：Pass @EventListener to Component via Vuejs Router通过 Vuejs 路由器将 @EventListener 传递给组件
【发布时间】：2017-11-12 12:51:46
【问题描述】：

在我使用vuejs-router 之前，我是这样在应用程序中加载组件的：

<my-component @done="doneForm"
              @cancel="cancelForm"></my-component>

好吧，我想用vuejs-router 来加载my-component。那么，如何通过vuejs-router 将@done 和@cancel 传递给my-component？

【问题讨论】：

Vue 路由器是一个路由引擎，它不是用来加载组件的。您需要加载到组件的路由，然后以您使用回调的方式加载该组件。
Tnx 回复，你的意思是我在一个组件（而不是 vuejs 应用）中使用 vuejs-router 并通过路由在该组件中加载my-component？

标签： vue.js vue-router

【解决方案1】：

您需要定义您的my-component 将被实例化的路由。该组件将包含 done 和 cancel 回调，所以：

var router = new VueRouter({
  routes: [
    { path: '/someRoute', component: SomeComponent }
  ]
]

SomeComponent 类似于：

<template>
    <my-component @done="doneForm" @cancel="cancelForm"></my-component>
</template>
<script>
    import MyComponent from '/some/path/components/MyComponent'

    export default {
        components: {
            myComponent: MyComponent
        },
        methods: {
            doneForm () {
                console.log('Form Done')
            },
            cancelForm () {
                console.log('Cancel Form')
            }
        }
    }
</script>

由于您没有显示任何代码以及如何调用 <my-component>，但重点是 <my-component> 需要在另一个组件中的某个位置实例化，该组件可以容纳 cancelForm 和 @987654330 @ 方法。如果你不想要这些回调，那么你可以设置一个路由直接到那个组件。

另一个选择是使用 Vuex 使事物有状态。您可以从组件中删除回调，当表单在<my-component> 内完成时，将某些内容设置为您可以对应用程序中的其他位置做出反应的状态。你也可以对事件做同样的事情并引发一个事件来监听并做一些事情。

【讨论】：

我喜欢第一种方式:)