vue2.0 で非親子コンポーネント間で通信するにはどうすればよいですか?

次の Vue.js チュートリアル コラムでは、vue2.0 の非親子コンポーネント間の通信方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

vue では、親コンポーネントは props を使用してそのコンポーネントと通信し、子コンポーネントは $emit イベントを使用して親コンポーネントと通信します。親と子?、公式ドキュメントには数ストロークしかなく、

の概念は非常に曖昧ですが、この空の vue インスタンスをどこに配置する必要がありますか?オプティカル リリース ドキュメントに明確な説明があり、その他の情報をいくつか確認したところ、この非父子通信は実際には次のように使用されていることがわかりました:

まず、この空のインスタンスをルートの下に配置する必要があります。つまり、図に示すように、以下の main .js に配置されます:

import Vue from 'vue'
import App from './App'
import router from './router'


Vue.config.productionTip = false;


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  data:{
    Hub:new Vue()
  },
  template: &#39;<App/>&#39;,
  components: { App }
});

私の 2 つのコンポーネントは、child1.vue と child2.vue と呼ばれます。 child1.vue のボタンをクリックして、child2.vue の値を変更したいと考えています。この時点では、$root ツールを使用して次のことを実現する必要があります:

child1.vue:

<template lang="pug">
  p this is child
    span(@click="correspond") 点击进行非组件之间的通信
</template>
<script>
  export default{
    methods: {
      correspond(){
          this.$root.Hub.$emit("change","改变")
      }

    }
  }
</script>

child2 .vue:

<template lang="pug">
  p this is child2
    span {{message}}
</template>
<script>
  export default{
    data(){
      return {
        message: "初始值"
      }
    },
    created(){
      this.$root.Hub.$on("change", () => {
        this.message = "改变"
      })
    }
  }
</script>

この時点で、希望する効果を達成できます。

関連する推奨事項:

2020 フロントエンド vue インタビューの質問の概要 (回答付き)

vue チュートリアル推奨事項: 2020 年最新の vue.js ビデオ チュートリアル 5 選

プログラミング関連の知識の詳細については、プログラミング教育をご覧ください。 ！

以上がvue2.0 で非親子コンポーネント間で通信するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。