在我使用vuejs-router之前,我已经通过这种方式在应用中加载了组件:
<my-component @done="doneForm"
@cancel="cancelForm"></my-component>
好吧,我想使用vuejs-router
加载my-component
。那么,我如何通过@done
将@cancel
和my-component
传递给vuejs-router
?
答案 0 :(得分:0)
您需要定义将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
内完成表单时设置一些状态,您可以对应用中的其他位置做出反应。你也可以对事件做同样的事情并举起一个事件来倾听并做一些事情。