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

Question

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

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

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

Answer 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 和 doneForm 方法。如果你不想要这些回调，那么你可以设置一个路由直接去那个组件。

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

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

Pass @EventListener to Component via Vuejs Router

vue.js

vue-router