Vuejsルータを経由してコンポーネントに渡す@EventListener

Question

私はvuejs-router使用する前に、私はコンポーネントのアプリでこのようにロードしました：

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

まあ、私はmy-componentをロードするためにvuejs-routerを使用したいです。だから、@doneと@cancelをmy-componentにvuejs-router経由で渡すにはどうすればよいですか？

Answer 1

my-componentがインスタンス化されるルートを定義する必要があります。このコンポーネントは、そう、doneとcancelコールバックが含まれます：あなたは任意のコードを示していませんでしたし、どのようにあなたがあなたの<my-component>が、呼んでいるとして

<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> 

：

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

SomeComponentは次のようなものになるだろう全体として、は、cancelFormとdoneFormのメソッドを保持できる別のコンポーネントのどこかでインスタンス化する必要があります。これらのコールバックが必要ない場合は、ルートを設定してそのコンポーネントに直接進むことができます。

もう一つの選択肢は、Vuexを使ってステートフルなものにすることです。コンポーネントからコールバックを削除し、<my-component>内でフォームが完了したときに、アプリ内の他の場所に反応できる状態に設定します。イベントでも同じことをして、何かを聞いて何かするイベントを起こすことができます。