vue コンポーネントの通信方法の紹介 (コード付き)

この記事は、vue コンポーネントの通信方法 (コード付き) を紹介するもので、ある程度の参考になりますので、困っている方は参考にしていただければ幸いです。ヘルプ。

vue のコンポーネント化はその中心的なアイデアであり、大きなページであっても小さなボタンであっても、それをコンポーネントと呼ぶことができます。 Vue ベースの開発では、基本コンポーネントであってもビジネス コンポーネントであっても、コンポーネントを 1 つずつ記述し、最終的にはそれらをすべて組み合わせる必要があります。コンポーネントの階層関係によれば、コンポーネント間の関係は、親子関係、世代関係、兄弟関係、無関係に分類できます。

$ref、$parent、$children

現在のコンテキストに基づいて、$ref、$parent、$children を通じてコン​​ポーネント インスタンスにアクセスし、コンポーネントのメソッドを直接呼び出すことができます。またはデータにアクセスします。このうち、$parent は現在のコンポーネントの親コンポーネントにアクセスでき、$children は現在のコンポーネントのすべての子コンポーネントにアクセスできます。 $parent と $children は両方ともコンポーネント インスタンスを取得できますが、レベルを越えたり兄弟間で通信したりすることができないという欠点があります。

provide と inject

provide / inject は、バージョン 2.2.0 以降の Vue によって追加された新しい API です。

このオプションのペアは、コンポーネント階層がどれほど深くても、祖先コンポーネントがそのすべての子孫に依存関係を注入できるようにするために一緒に使用する必要があります。また、このオプションは、上流およびコンポーネントの時点から常に有効になります。下流関係が確立されます。

つまり、親コンポーネントに値を指定し、変更された値を使用する必要がある子孫コンポーネントに注入します。つまり、

// Parent.vue
export default {
    provide() {
        return {
            name: 'Stone'
        }
    }
}
// Child.vue
export default {
   inject: ['name'],
   mounted() {
       console.log(this.name)
   }
}

は単なる Child.vue ではありません。 Parent.vue のままです。 サブコンポーネントは、何世代離れていても、このメソッドを通じて注入できます。この多層コンポーネント透過伝送方式により、一方向のデータフローの明瞭性を確保することができ、例えばユーザー情報などのグローバル情報は、サードパーティライブラリvuexを導入することなく、これら2つのAPIを利用することで完結できます。

Vuex

vuex の代わりに、データを一元管理し、必要なときにいつでも取得できるようにするという考え方に従えば、ルート コンポーネントである App.vue にグローバル情報を注入し、ページに追加します。どこでも使用できます。

// App.vue
<template>
  <div>
    <router-view></router-view>
  </div>
</template>
export default {
    provide() {
        return {
            userInfo: this.user
        }
    },
    data() {
        return {
            user: {}
        }
    },
    methods: {
      getUserInfo () {
        $.ajax('/user/info', (data) => {
          this.user = data
        })
      }
    }
}

App.vue インスタンス this 全体を外部に提供し、他のページが this.userInfo を通じてユーザー情報を取得できるようにします。

<template>
  <div>
    {{ userInfo }}
  </div>
</template>
<script>
  export default {
    inject: ['userInfo']
  }
</script>

$dispatch と $broadcast

これら 2 つの API は Vue 1.0 バージョンです。$dispatch はイベントを上位レベルにディスパッチするために使用され、$broadcast はイベントを下位レベルにブロードキャストするために使用されます。 2.0 バージョンでは非推奨になりました。

コンポーネント ツリー構造に基づくイベント フロー手法は、理解するのが難しい場合があり、コンポーネント構造が拡大するにつれてますます脆弱になるためです。

ただし、コンポーネントのクロスレベル通信のために、ディスパッチ メソッドとブロードキャスト メソッドを自分で実装することもできます。実装の鍵は、通信するコンポーネントを正しく見つける方法です。つまり、コンポーネントの名前オプションを照合してコンポーネントを下位または上位に見つけることです。

どちらのメソッドも 3 つのパラメーターを渡す必要があります。最初のパラメーターは通信コンポーネントの名前オプション値、2 番目はカスタム イベント名、3 番目は通信コンポーネントに渡される値です。ディスパッチでは、componentName が親コンポーネントの name オプションと一致するまで、while ループで親コンポーネントを上方向に検索し、このとき、親コンポーネントが通信対象のコンポーネントになります。ブロードキャスト メソッドはディスパッチに似ており、forEach ループを通じてサブコンポーネントを下方に検索します。最後に、ミックスインをカプセル化して再利用しやすくします。

// emitter.js 
function broadcast(componentName, eventName, params) {
  this.$children.forEach(child => {
    const name = child.$options.name;
    if (name === componentName) {
      child.$emit.apply(child, [eventName].concat(params));
    } else {
      broadcast.apply(child, [componentName, eventName].concat([params]));
    }
  });
}
export default {
  methods: {
    dispatch(componentName, eventName, params) {
      let parent = this.$parent || this.$root;
      let name = parent.$options.name;
      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;
        if (parent) {
          name = parent.$options.name;
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    },
    broadcast(componentName, eventName, params) {
      broadcast.call(this, componentName, eventName, params);
    }
  }
};

ミックスインを通じてコン​​ポーネントをコンポーネントに混合し、コンポーネント間の通信を実現します。

<!-- Parent.vue -->
<template>
  <button @click="handleClick">
    触发事件
    <Child></Child>
  </button>
</template>
<script>
import Emitter from "../assets/js/emitter.js";
import Child from "./Child.vue";
export default {
  name: "Parent",
  mixins: [Emitter],
  created() {
    this.$on("on-message", message => {
      console.log(message);
    });
  },
  components: {
    Child
  },
  methods: {
    handleClick() {
      this.broadcast("Child", "on-message", "Hello, I am Parent Component");
    }
  }
};
</script>

<!-- Child.vue -->
<template>
  <div></div>
</template>
<script>
import Emitter from "../assets/js/emitter.js";
export default {
  name: "Child",
  mixins: [Emitter],
  mounted() {
    this.$on("on-message", message => {
      console.log(message);
      this.dispatch("Parent", "on-message", "Copy that, I am Child Component");
    });
  }
};
</script>

Vue 1.0 バージョンの 2 つの組み込み API と比較すると、自己実装メソッドには次のような違いがあります。

• コンポーネントの名前を次のように渡す必要があります。最初のパラメータ;
• コンポーネントが一致するとループは停止し、バブルしません;
• 渡される値は 1 つのパラメータのみです。複数のパラメータを渡す必要がある場合は、それらのパラメータのみを渡すことができます。オブジェクトまたは配列の形式で渡される;

その他のメソッド

vue には、次のようなコンポーネント通信用の他のメソッドがあります。 ##props

,

$ Emit

1. <!-- Parent.vue -->
   <template>
     <Child :info="info"
            @update="onUpdateName"></Child>
   </template>
   <script>
   import Child from "./Child.vue";
   export default {
     data() {
       return {
         info: {
           name: "stone"
         }
       };
     },
     components: {
       Child
     },
     methods: {
       onUpdateName(name) {
         this.info.name = name;
       }
     }
   };
   </script>

   <!-- Child.vue -->
   <template>
     <div>
       <div>{{info.name}}</div>
       <button @click="handleUpdate">update</button>
     </div>
   </template>
   <script>
   export default {
     props: {
       info: {
         type: Object,
         default: {}
       }
     },
     methods: {
       handleUpdate() {
         this.$emit("update", "new-name");
       }
     }
   };
   </script>

   親コンポーネントは独自のメソッドを子コンポーネントに渡し、子コンポーネントはそのメソッドを呼び出してデータを親に渡しますイベント バス イベント バス $attrs および $listenersVue 2.4 の新しい API を使用するコンポーネント。
$attrs には、props として認識 (および取得) されない親スコープ内の属性バインディング (クラスとスタイルを除く) が含まれています。

$listeners には、親スコープ内の v-on イベント リスナーが含まれます (.native 修飾子なし)。 Vuex の集中状態管理

最後に記載

さまざまなシナリオに適したさまざまな通信方法があり、通信は Vue の組み込み API またはカスタム イベントを通じて実現できます。十分に複雑な場合でも、データ管理に Vuex を使用できます。

この記事はすべてここにあります。その他のエキサイティングなコンテンツについては、PHP 中国語 Web サイトの

JavaScript チュートリアル ビデオ

列に注目してください。

以上がvue コンポーネントの通信方法の紹介 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。