Vue.js コンポーネント通信におけるいくつかの姿勢の詳細な分析-jsチュートリアル-php.cn

Vue.js コンポーネント通信におけるいくつかの姿勢の詳細な分析

黄舟

リリース： 2017-10-23 09:40:05

オリジナル

1331 人が閲覧しました

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 &#39;./child.vue&#39;;
export default {
  components: {
    child
  },
  data () {
    return {
      message: &#39;father message&#39;;
    }
  }
}
</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 &#39;./child.vue&#39;;
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(&#39;msgFunc&#39;);
    }
  }
}
</script>

ログイン後にコピー

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

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

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

方法 3: $parent を使用する

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

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

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

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

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

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

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

ログイン後にコピー

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

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

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

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

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

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

概要

以上がVue.js コンポーネント通信におけるいくつかの姿勢の詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。