30

私はかなり単純な VueJS アプリ、3 つのコンポーネント (Login、SelectSomething、DoStuff) を持っています。

ログインコンポーネントは、ユーザーとパスの入力用の単なるフォームですが、2 番目のコンポーネントは、ログインの進行中に取得されたデータを表示する必要があります。

あるコンポーネントから他のコンポーネントにデータを共有するにはどうすればよいですか? 2 番目のコンポーネントにルーティングしたときに、ログイン 1 で取得したデータがまだ残っているようにするにはどうすればよいですか?

4

3 に答える 3

23

プロパティまたはイベント バスを使用して、コンポーネントからイベントを発行し、別のコンポーネントでリッスンすることができます。

vm.$on('test', function (msg) {
  console.log(msg)
})

vm.$emit('test', 'hi')
// -> "hi"
于 2016-10-25T04:43:39.907 に答える
12

Vue.js では、コンポーネントはpropsまたはeventsを使用して相互に通信できます。それはすべて、コンポーネント間の関係に依存します。

この小さな例を見てみましょう:

<template>
<h2>Parent Component</h2>
<child-component></child-component>
</template>

親から子に情報を送信するには、小道具を使用する必要があります。

<template>
<h2>Parent Component</h2>
<child-component :propsName="example"></child-component>
</template>

<script>
export default {
 data(){
  return{
   example: 'Send this variable to the child'
  }
 }
}
</script>

子から親に情報を送信するには、イベントを使用する必要があります。

子コンポーネント

<script>
 ...
 this.$emit('example', this.variable);
</script>

親コンポーネント

<template>
<h2>Parent Component</h2>
<child-component @example="methodName"></child-component>
</template>

<script>
export default {
 methods: {
  methodName(variable){
   ...
  }
 }
}
</script>

このテーマの詳細については、vue.js のドキュメントを確認してください。これは非常に簡単な紹介です。

于 2017-10-19T15:03:59.163 に答える