通过Vuejs Router将@EventListener传递给Component

时间:2017-11-12 12:51:47

标签: vue.js vue-router

在我使用vuejs-router之前,我已经通过这种方式在应用中加载了组件:

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

好吧,我想使用vuejs-router加载my-component。那么,我如何通过@done@cancelmy-component传递给vuejs-router

1 个答案:

答案 0 :(得分:0)

您需要定义将my-component实例化的路线。此组件将包含donecancel回调,因此:

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>需要在另一个可以保持{{{{}}的组件中的某个地方实例化1}}和cancelForm方法。如果您不想要这些回调,那么您可以设置一条路线直接进入该组件。

另一个选择是使用Vuex使事物有状态。您可以从组件中删除回调,并在doneForm内完成表单时设置一些状态,您可以对应用中的其他位置做出反应。你也可以对事件做同样的事情并举起一个事件来倾听并做一些事情。