Vue.jsコンポーネント通信例の共有-jsチュートリアル-php.cn

Vue.jsコンポーネント通信例の共有

小云云

リリース： 2018-01-04 10:17:27

オリジナル

1470 人が閲覧しました

私は Vue.js に非常に興味があり、普段取り組んでいる技術スタックも Vue.js なので、ここ数か月間 Vue.js のソースコードを勉強し、まとめとアウトプットを作成しました。コンポーネントは、Vue.js の最も強力な機能の 1 つです。コンポーネントは HTML 要素を拡張し、再利用可能なコードをカプセル化できます。この記事では、Vue.js コンポーネントのコミュニケーションに関するいくつかの姿勢を紹介しますので、興味のある方はぜひご覧ください。

前に書いてあります

理解にズレがあるかもしれませんが、問題提起や指摘を歓迎し、一緒に学び、一緒に進歩してください。

Vue コンポーネントとは何ですか?

コンポーネントは、Vue.js の最も強力な機能の 1 つです。コンポーネントは HTML 要素を拡張し、再利用可能なコードをカプセル化できます。大まかに言うと、コンポーネントは、Vue.js のコンパイラーが特別な機能を追加するカスタム要素です。場合によっては、コンポーネントは、 is 属性で拡張されたネイティブ HTML 要素の形式を取ることもできます。

Vue コンポーネント間の通信

親コンポーネントは子コンポーネントと通信します

方法 1: props

props を使用すると、親コンポーネントは props を使用して子コンポーネントにデータを渡すことができます。

親コンポーネントの vue テンプレート Father.vue

<template>
  <child :msg="message"></child>
</template>
<script>
import child from './child.vue';
export default {
  components: {
    child
  },
  data () {
    return {
      message: 'father message';
    }
  }
}
</script>

ログイン後にコピー

子コンポーネントの vue テンプレート child.vue

<template>
  <p>{{msg}}</p>
</template>
<script>
export default {
  props: {
    msg: {
      type: String,
      required: true
    }
  }
}
</script>

ログイン後にコピー

方法 2 $children を使用する

$children を使用して、親コンポーネント内の子コンポーネントにアクセスします。

子コンポーネントは親コンポーネントと通信します

方法 1: vue イベントを使用する

親コンポーネントはイベントメソッドを子コンポーネントに渡し、子コンポーネントは $emit を通じてイベントをトリガーし、親コンポーネントにコールバックします。

親コンポーネントの Vue テンプレート Father.vue

<template>
  <child @msgFunc="func"></child>
</template>
<script>
import child from './child.vue';
export default {
  components: {
    child
  },
  methods: {
    func (msg) {
      console.log(msg);
    }
  }
}
</script>

ログイン後にコピー

子コンポーネントの Vue テンプレート child.vue

<template>
  <button @click="handleClick">点我</button>
</template>
<script>
export default {
  props: {
    msg: {
      type: String,
      required: true
    }
  },
  methods () {
    handleClick () {
      //........
      this.$emit('msgFunc');
    }
  }
}
</script>

ログイン後にコピー

方法 2: 親コンポーネントによって渡された props を変更して、親コンポーネントのデータを変更します

このメソッドは、への参照のみを渡すことができます。親コンポーネント変数を使用する場合に使用できますが、リテラル変数では対応する効果を得ることができません。飲酒変数は、親コンポーネント内のデータであっても、子コンポーネントによって取得された props 内のデータであっても、最終的には同じメモリアドレスを指すため、子コンポーネント内の props 内のデータを変更すると、親コンポーネント内のデータも変更されます。成分。

ただし、変更を表示するためにデータを使用する場合は、props の値を直接変更することはお勧めできません。実際の開発では、それをデータに入れて親コンポーネントに返すことがよくあります。次に、イベントを使用してデータを返します。これにより、コンポーネントの独立性と分離性が維持され、同じデータの使用による異常なデータフローの混乱が発生せず、データを変更するために特定のインターフェイスを介してのみデータが送信され、内部データのステータスは専用のデータによって管理されます。

方法 3: $parent を使用する

$parent を使用して、親コンポーネントのデータにアクセスします。

非親子コンポーネントと兄弟コンポーネント間のデータ転送

非親子コンポーネント通信では、Vue は中央イベントバスとして Vue インスタンスを使用することを公式に推奨しています。

Vue には内部イベント機構があり、ソースコードを参照できます。

$on メソッドはイベントをリッスンするために使用されます。

$emit はイベントをトリガーするために使用されます。

/*新建一个Vue实例作为中央事件总嫌*/
let event = new Vue();
/*监听事件*/
event.$on('eventName', (val) => {
  //......do something
});
/*触发事件*/
event.$emit('eventName', 'this is a message.');

ログイン後にコピー

マルチレベルの親子コンポーネント通信:

Vue1.0 では、子コンポーネント (または親コンポーネント) にブロードキャスト (またはディスパッチ) するための 2 つのメソッド $broadcast と $dispatch が実装されています。イベントがリッスンされて true が返されると、イベントは引き続き孫レベルのコンポーネントにブロードキャスト (またはディスパッチ) されます。ただし、このメソッドは Vue2.0 では削除されました。

Ele.meのオープンソースのコンポーネントライブラリ要素を勉強していたら、ブロードキャストメソッドとディスパッチメソッドが再実装され、ミックスインの形で導入されていることが分かりました。詳しくは「要素コンポーネントライブラリのブロードキャストとディスパッチメソッドについての話」を参照してください。急送"。ただし、Vue1.0 の 2 つのメソッド実装とは少し異なります。これら 2 つのメソッドは、子孫コンポーネントへのイベントブロードキャストと、マルチレベルの親コンポーネントへのイベントディスパッチの機能を実装します。ただし、これは広義のイベントブロードキャストではありません。commentName を指定して、指定したコンポーネント名を持つコンポーネントにイベントをブロードキャスト (ディスパッチ) する必要があります。

実際、これら 2 つのメソッドの内部実装では、引き続き $parent と $children が使用されます。これらは、子ノードを段階的に走査したり、親ノードをクエリしたりするために使用されます。指定されたコンポーネント名にアクセスすると、$emit が呼び出されて、指定されたイベント。

複雑なシングルページアプリケーションのデータ管理

アプリケーションが十分に複雑な場合は、データ管理に vuex を使用してください。