Question

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

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

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

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

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

通过Vuejs Router将@EventListener传递给Component

1 个答案: