web-dev-qa-db-ja.com

VueJSのコンポーネント間でデータを共有する方法

かなりシンプルなVueJSアプリ、3つのコンポーネント（Login、SelectSomething、DoStuff）があります

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

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

vue-componentvue-routervue.jsvuejs2
24
daniels

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

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

vm.$emit('test', 'hi')
// -> "hi"
19
highFlyingSmurfs

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のドキュメントを確認してください。これは非常に短い紹介です。

9
Jad Rizk

ネストされたコンポーネントが多数ある場合は、この小さな plugin を使用します。

Vue.use(VueGlobalVariable, {
  globals: {
    user: new User('user1'),
    obj:{},
    config:Config,
    ....
  },
});

これで、$user小道具などを使用せずに任意のコンポーネントで

5
mudin