Vue 兄弟コンポーネント間の通信方法-jsチュートリアル-php.cn

Vue 兄弟コンポーネント間の通信方法

小云云

リリース： 2018-01-02 13:08:48

オリジナル

1932 人が閲覧しました

プロジェクトでは、兄弟コンポーネントが通信する状況によく遭遇します。大規模なプロジェクトでは vuex を導入することでコンポーネント間の通信の問題を簡単に管理できますが、小規模なプロジェクトでは vuex を導入する必要がない場合もあります。以下に、従来の方法を使用して親コンポーネントと子コンポーネント間の通信を実現する方法を簡単に紹介します。この記事では、主に Vue 兄弟コンポーネントの通信方法 (Vuex を使用しない) を紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

簡単な例: コンポーネント a のボタンをクリックして情報をコンポーネント b に渡し、コンポーネント b がポップアップします。

主なアイデアは次のとおりです: まず息子から父親に、次に父親から息子に渡します

まず、a.vue コンポーネントで、イベント内のボタンボタンに handleClick イベントをバインドします。では、 this.$emit( ) メソッドを渡してカスタムイベントをトリガーし、パラメーターを渡します。

この例では、this.$emit() を使用して isLogFn メソッドのカスタムイベントをトリガーし、ログパラメーターを渡します

a.vue

<template>
 <p class="ap">
 <p>a组件</p>
 <button type="button" v-on:click="handleClick">点击打开组件b弹窗</button>
 </p>
</template>

<script>

export default {
 methods: {
 handleClick () {
  this.$emit(&#39;isLogFn&#39;,&#39;log&#39;)
 }
 }
}
</script>

<style>
.ap{
 width: 400px;
 height: 200px;
 border: 1px solid #000;
 margin: 0 auto;
}
</style>

ログイン後にコピー

2 番目のステップは、親コンポーネントでリッスンすることですこのカスタムイベントは、対応するメソッドをトリガーし、コンポーネントによって渡されたパラメーターを受け取ります。この時点で、子コンポーネントから親コンポーネントに値を渡すプロセスが完了しました。

この例では、は isLogFn をリッスンして、親コンポーネントで定義したメソッド lisLogFn をトリガーし、渡された「ログ」データを取得します。息子から父親への価値の移転を完了します。

この時点では、プロセス全体はまだ終わっておらず、まだ半分しか終わっていません。次に、親コンポーネントと子コンポーネント間の値の転送を完了し、コンポーネント a の情報をコンポーネント b に渡す必要があります。

< bPage > タグで islog 属性をバインドし、lisLogFn メソッドを通じて「データ」を取得した後、その判断に基づいてデータを変更する必要があります。 result.data() を実行し、それによってデータを b コンポーネントに渡します

App.vue

<template>
 <p id="app">
 <aPage @isLogFn = "lisLogFn"></aPage>
 <bPage :isLog = "login"></bPage>
 </p>
</template>

<script>

import aPage from &#39;./components/a.vue&#39;
import bPage from &#39;./components/b.vue&#39;

export default {
 data () {
 return {
  login: &#39;false&#39;
 }
 },
 name: &#39;app&#39;,
 components: {
 aPage,
 bPage
 },
 methods: {
 lisLogFn (data) {
  if (data == &#39;log&#39;) {
  this.login = &#39;true&#39;
  }
 }
 }
}
</script>

<style>
</style>

ログイン後にコピー

最後に、b コンポーネントで props を作成し、渡した値である isLog 属性を定義する必要があります。次に、このデータを計算されたプロパティで処理し、最終的に b コンポーネントによって使用されます。この例では、v-show="isLogin" を使用してポップアップウィンドウを開くかどうかを制御します。

覚えておいてください！この props は直接使用することはできず、計算処理を通じて処理する必要があります。その理由は、vue

一方向データフロー

b.vue

<template>
 <p class="bp" v-show="isLogin">我是组件B弹窗</p>
</template>

<script>
export default {
 props: [&#39;isLog&#39;],
 data () {
 return {

 }
 },
 computed: {
 isLogin () {
  if(this.isLog == &#39;true&#39;){
  return true
  } else {
  return false
  }
 }
 }
}
</script>

<style>
 .bp{
 width: 200px;
 height: 200px;
 border: 1px #000 solid;
 margin: 0 auto;
 }

</style>

ログイン後にコピー

の公式説明を引用しているためです。兄弟コンポーネント間の値の転送を実装するには、まず息子と父、父と息子の間の値の転送についてよく理解しておく必要があります。

子の親: