役立つ情報の共有: Vue3 コンポーネントと通信する 7 つの方法!

コンポーネントは Vue のコア機能であり、再利用可能な Vue インスタンスですが、コンポーネント インスタンスのスコープは互いに独立しているため、異なるコンポーネント間のデータは相互に直接参照できません。では、コンポーネント間でデータを関連付けるにはどうすればよいでしょうか?どのように通信してデータを転送するのですか?次の記事では 7 つのコンポーネント通信方法を紹介します。

##この記事では、一般的なオプションベースの API 記述方法と比較して、複合 API 記述方法を採用しています。

詳細については、Vue Document の 2 つのメソッドの説明を参照してください。

注:

php 中国語オンライン ワーク では、vue コースの最新バージョンの指導も開始しています。興味のある友人は、詳細を学ぶことができます。

この記事では、次の 7 つのコンポーネント通信メソッドを紹介します:

props
• emit
• v-model
refs
• provide/inject
• eventBus
• vuex/pinia (状態管理ツール)

何かを始める~

栗をください

格言にあるように、学習するときにデモを書かないとフーリガンになります~

この記事では、次のデモに焦点を当てます。以下の図:

上の図では、

list と input box がそれぞれ親コンポーネントと子コンポーネントです。さまざまな値の転送方法、誰が親コンポーネントで誰が子コンポーネントになるかが調整されます。

1. Props メソッド

Props メソッドは、Vue で最も一般的な 父から子へのメソッドであり、使用は比較的簡単です。 [関連する推奨事項: vue.js ビデオ チュートリアル ]上記のデモによると、親コンポーネントでデータとそのデータに対する操作を定義し、子コンポーネントはリストをレンダリングするだけです。 ;

親コンポーネントのコードは次のとおりです:

<template>
  <!-- 子组件 -->
  <child-components :list="list"></child-components>
  <!-- 父组件 -->
  <div class="child-wrap input-group">
    <input
      v-model="value"
      type="text"
      class="form-control"
      placeholder="请输入"
    />
    <div class="input-group-append">
      <button @click="handleAdd" class="btn btn-primary" type="button">
        添加
      </button>
    </div>
  </div>
</template>
<script setup>
import { ref } from &#39;vue&#39;
import ChildComponents from &#39;./child.vue&#39;
const list = ref([&#39;JavaScript&#39;, &#39;HTML&#39;, &#39;CSS&#39;])
const value = ref(&#39;&#39;)
// add 触发后的事件处理函数
const handleAdd = () => {
  list.value.push(value.value)
  value.value = &#39;&#39;
}
</script>

子コンポーネントは、親コンポーネントによって渡された値をレンダリングするだけで済みます。コードは次のとおりです:

<template>
  <ul class="parent list-group">
    <li class="list-group-item" v-for="i in props.list" :key="i">{{ i }}</li>
  </ul>
</template>
<script setup>
import { defineProps } from &#39;vue&#39;
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
})
</script>

2. Emit メソッド

emit

メソッドは、Vue で最も一般的なコンポーネント通信メソッドでもあり、このメソッドは 子から親への ; に使用されます。 上記のデモによると、親コンポーネントでリストを定義し、子コンポーネントは追加された値を渡すだけで済みます。

サブコンポーネントのコードは次のとおりです。

<template>
  <div class="child-wrap input-group">
    <input
      v-model="value"
      type="text"
      class="form-control"
      placeholder="请输入"
    />
    <div class="input-group-append">
      <button @click="handleSubmit" class="btn btn-primary" type="button">
        添加
      </button>
    </div>
  </div>
</template>
<script setup>
import { ref, defineEmits } from &#39;vue&#39;
const value = ref(&#39;&#39;)
const emits = defineEmits([&#39;add&#39;])
const handleSubmit = () => {
  emits(&#39;add&#39;, value.value)
  value.value = &#39;&#39;
}
</script>

サブコンポーネントの[追加]ボタンをクリックした後、

emit

カスタム イベントを発行し、追加した値を渡します。パラメータとして。 親コンポーネントのコードは次のとおりです。

<template>
  <!-- 父组件 -->
  <ul class="parent list-group">
    <li class="list-group-item" v-for="i in list" :key="i">{{ i }}</li>
  </ul>
  <!-- 子组件 -->
  <child-components @add="handleAdd"></child-components>
</template>
<script setup>
import { ref } from &#39;vue&#39;
import ChildComponents from &#39;./child.vue&#39;
const list = ref([&#39;JavaScript&#39;, &#39;HTML&#39;, &#39;CSS&#39;])
// add 触发后的事件处理函数
const handleAdd = value => {
  list.value.push(value)
}
</script>

親コンポーネントでは、子コンポーネントのカスタム イベントをリッスンし、対応する追加操作を実行するだけです。

3. v-model メソッド

v-model

は、次のコードのように、Vue の優れた構文糖衣です。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;ChildComponent v-model:title=&quot;pageTitle&quot; /&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div> 省略形以下のコードの

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

v-model

は、実際には非常に単純です。次に、上記のデモと、v-model を使用してそれを実装する方法を見てみましょう。 サブコンポーネント

<template>
  <div class="child-wrap input-group">
    <input
      v-model="value"
      type="text"
      class="form-control"
      placeholder="请输入"
    />
    <div class="input-group-append">
      <button @click="handleAdd" class="btn btn-primary" type="button">
        添加
      </button>
    </div>
  </div>
</template>
<script setup>
import { ref, defineEmits, defineProps } from &#39;vue&#39;
const value = ref(&#39;&#39;)
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
})
const emits = defineEmits([&#39;update:list&#39;])
// 添加操作
const handleAdd = () => {
  const arr = props.list
  arr.push(value.value)
  emits(&#39;update:list&#39;, arr)
  value.value = &#39;&#39;
}
</script>

サブコンポーネントでは、まず

props

と emis を定義し、イベントを追加した後に emit を指定します。 。

注:

update:*

は Vue の固定の記述方法であり、* は props 内の特定のプロパティ名を表します。

親コンポーネントで使用するのは比較的簡単です。コードは次のとおりです:

<template>
  <!-- 父组件 -->
  <ul class="parent list-group">
    <li class="list-group-item" v-for="i in list" :key="i">{{ i }}</li>
  </ul>
  <!-- 子组件 -->
  <child-components v-model:list="list"></child-components>
</template>
<script setup>
import { ref } from &#39;vue&#39;
import ChildComponents from &#39;./child.vue&#39;
const list = ref([&#39;JavaScript&#39;, &#39;HTML&#39;, &#39;CSS&#39;])
</script>

4. refs メソッド

オプションの API を使用する場合、 can use

This.$refs.name

メソッドは、指定された要素またはコンポーネントを取得するために使用されますが、このメソッドは結合された API では使用できません。 ref を通じてコン​​ポーネントまたは要素を取得したい場合は、コンポーネントのマウント後にアクセスできる同じ名前の Ref オブジェクトを定義する必要があります。 サンプル コードは次のとおりです:

<template>
  <ul class="parent list-group">
    <li class="list-group-item" v-for="i in childRefs?.list" :key="i">
      {{ i }}
    </li>
  </ul>
  <!-- 子组件 ref的值与<script>中的保持一致 -->
  <child-components ref="childRefs"></child-components>
  <!-- 父组件 -->
</template>
<script setup>
import { ref } from &#39;vue&#39;
import ChildComponents from &#39;./child.vue&#39;
const childRefs = ref(null)
</script>

サブコンポーネントのコードは次のとおりです:

<template>
  <div class="child-wrap input-group">
    <input
      v-model="value"
      type="text"
      class="form-control"
      placeholder="请输入"
    />
    <div class="input-group-append">
      <button @click="handleAdd" class="btn btn-primary" type="button">
        添加
      </button>
    </div>
  </div>
</template>
<script setup>
import { ref, defineExpose } from &#39;vue&#39;
const list = ref([&#39;JavaScript&#39;, &#39;HTML&#39;, &#39;CSS&#39;])
const value = ref(&#39;&#39;)
// add 触发后的事件处理函数
const handleAdd = () => {
  list.value.push(value.value)
  value.value = &#39;&#39;
}
defineExpose({ list })
</script>

setup

コンポーネントはデフォルトで閉じられています。つまり、テンプレートを介して ref 取得されたコンポーネントのパブリック インスタンスは、**<スクリプト セットアップ># で宣言されたバインディング を公開しません。 ＃＃＃＃。 公開する必要がある場合は、***defineExpose**** API** を通じて公開する必要があります。 5. Provide/inject メソッド provide

と

inject

は、Vue で提供される API のペアです。この API は、親コンポーネントを実装して、子コンポーネントは、レベルがどれほど深くても、この API のペアを通じてデータを渡します。サンプル コードは次のとおりです。

親コンポーネント

<template>
  <!-- 子组件 -->
  <child-components></child-components>
  <!-- 父组件 -->
  <div class="child-wrap input-group">
    <input
      v-model="value"
      type="text"
      class="form-control"
      placeholder="请输入"
    />
    <div class="input-group-append">
      <button @click="handleAdd" class="btn btn-primary" type="button">
        添加
      </button>
    </div>
  </div>
</template>
<script setup>
import { ref, provide } from &#39;vue&#39;
import ChildComponents from &#39;./child.vue&#39;
const list = ref([&#39;JavaScript&#39;, &#39;HTML&#39;, &#39;CSS&#39;])
const value = ref(&#39;&#39;)
// 向子组件提供数据
provide(&#39;list&#39;, list.value)
// add 触发后的事件处理函数
const handleAdd = () => {
  list.value.push(value.value)
  value.value = &#39;&#39;
}
</script>

子コンポーネント

<template>
  <ul class="parent list-group">
    <li class="list-group-item" v-for="i in list" :key="i">{{ i }}</li>
  </ul>
</template>
<script setup>
import { inject } from &#39;vue&#39;
// 接受父组件提供的数据
const list = inject(&#39;list&#39;)
</script>

データに

provide

を使用する場合は、次の点に注意してください。 transfer、子コンポーネントが親から渡されたデータ

を変更しないように、データを

readonly

ラップしてみてください。

6. イベント バス

イベント バスは Vue3 から削除されましたが、サードパーティ ツールの助けを借りて実現できます。Vue は正式に mitt または を推奨します。 tiny-emitter；

ほとんどの場合、グローバル イベント バスを使用してコンポーネント通信を実装することは推奨されません。比較的単純で粗雑ではありますが、イベント バスの維持は、詳細については、特定のツール

7 のドキュメントを参照してください。状態管理ツール

Vuex および Pinia は、Vue3 の状態管理ツールです。これを使用します。この 2 つのツールは、コンポーネント通信を簡単に実現できます。この 2 つのツールは、比較的強力であるため、ここでは示しません。詳細については、ドキュメントを確認してください

最後に書きました

##この記事はここまでです 以上です 一般的には比較的単純で、難しいことは何もありません。

この記事が少しでもお役にたてましたら、必要なときに見つからないように、「いいね！」や「コメント」をして集めてください。

記事に間違いがある場合は、修正してください~

元のアドレス: https://juejin.cn/post/7062740057018335245

著者: Yiwan Zhou

(学習ビデオ共有:

Web フロントエンド チュートリアル)