差出人：ワンボウルウィーク
https://juejin.cn/post/7062740057018335245
前に書く
この記事では <script setup> 、この組み合わせAPI書き込み方法を使用します。オプションタイプと比較して、組み合わせAPI書き込み方法はより無料です。詳細については、Vueドキュメント[1]の2つの方法の説明を参照してください。
この記事では、次の7つのコンポーネント通信方法を紹介します。
小道具
放出する
vモデル
refs
提供/注入
eventBus
vuex / pinia（状態管理ツール）
始めて〜
栗を取る
言われているように、勉強するときにデモを書かないと、フーリガンをプレイしていることになります〜
この記事では、次の図に示すように、次のデモに焦点を当てます。
上の図では、_list_と_input box_はそれぞれ親コンポーネントと子コンポーネントです。値の受け渡し方法によっては、親コンポーネントと子コンポーネントを調整できます。
小道具の方法
Propsこのメソッドは、Vueで最も一般的な親子メソッドの1つであり、比較的簡単に使用できます。
上記のデモによると、親コンポーネントのデータとデータに対する操作を定義し、子コンポーネントはリストのみをレンダリングします。
親コンポーネントコードは次のとおりです。
<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 'vue'
import ChildComponents from './child.vue'
const list = ref(['JavaScript', 'HTML', 'CSS'])
const value = ref('')
// add 触发后的事件处理函数
const handleAdd = () => {
list.value.push(value.value)
value.value = ''
}
</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 'vue'
const props = defineProps({
list: {
type: Array,
default: () => [],
},
})
</script>
复制代码放出方法
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 'vue'
const value = ref('')
const emits = defineEmits(['add'])
const handleSubmit = () => {
emits('add', value.value)
value.value = ''
}
</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 'vue'
import ChildComponents from './child.vue'
const list = ref(['JavaScript', 'HTML', 'CSS'])
// add 触发后的事件处理函数
const handleAdd = value => {
list.value.push(value)
}
</script>
复制代码親コンポーネントでは、子コンポーネントのカスタムイベントをリッスンしてから、対応する追加操作を実行するだけで済みます。
vモデル法
v-modelこれは、次のコードのように、Vueの優れたシンタックスシュガーです。
<ChildComponent v-model:title="pageTitle" />
复制代码これは、次のコードの省略形です。
<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 'vue'
const value = ref('')
const props = defineProps({
list: {
type: Array,
default: () => [],
},
})
const emits = defineEmits(['update:list'])
// 添加操作
const handleAdd = () => {
const arr = props.list
arr.push(value.value)
emits('update:list', arr)
value.value = ''
}
</script>
复制代码props子コンポーネントでは、最初に合計を定義し、emits次にemit加算が完了した後のイベントを指定します。
注：
update:*これはVueでの固定された記述方法であり、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 'vue'
import ChildComponents from './child.vue'
const list = ref(['JavaScript', 'HTML', 'CSS'])
</script>
复制代码refsメソッド
オプションAPIを使用する場合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 'vue'
import ChildComponents from './child.vue'
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 'vue'
const list = ref(['JavaScript', 'HTML', 'CSS'])
const value = ref('')
// add 触发后的事件处理函数
const handleAdd = () => {
list.value.push(value.value)
value.value = ''
}
defineExpose({ list })
</script>
复制代码setupコンポーネントはデフォルトで閉じられています。つまり、テンプレートを介して取得されrefたコンポーネントのパブリックインスタンスは、****で宣言されたバインディングを公開しません。公開する必要がある場合は、 ********APIを介して公開する必要があります。<script setup>defineExpose
提供/注入方法
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 'vue'
import ChildComponents from './child.vue'
const list = ref(['JavaScript', 'HTML', 'CSS'])
const value = ref('')
// 向子组件提供数据
provide('list', list.value)
// add 触发后的事件处理函数
const handleAdd = () => {
list.value.push(value.value)
value.value = ''
}
</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 'vue'
// 接受父组件提供的数据
const list = inject('list')
</script>
复制代码データ転送を使用providereadonlyするときは、サブコンポーネントが親から渡されたデータを変更しないように、可能な限りデータをラップするようにしてください。
イベントバス
イベントバスはVue3で削除されますが、サードパーティのツールを使用して実行できます。Vueは公式にmitt [2]またはtiny-emitter [3]を推奨しています。
ほとんどの場合、グローバルイベントバスを使用してコンポーネント通信を実装することはお勧めしません。比較的単純で失礼ですが、イベントバスの維持は長期的には大きな問題であるため、ここでは説明しません。詳細については、 、特定のツールのドキュメントを読むことができます
状態管理ツール
Vuex [4]とPinia [5]は、Vue3の状態管理ツールです。これら2つのツールを使用すると、コンポーネント通信を簡単に実装できます。これら2つのツールは比較的強力であるため、ここでは示しません。詳細については、ドキュメントを参照してください。
最後に書く
これでこの記事は終わりです。一般的に言って、比較的単純で、複雑なことは何もありません。
この記事がお役に立てば、必要なときに見つけられないように、いいね、コメント、お気に入りを付けてください。
本文に間違いがありましたら訂正してください〜
往期干货：
26个经典微信小程序+35套微信小程序源码+微信小程序合集源码下载（免费） 干货~~~2021最新前端学习视频~~速度领取
前端书籍-前端290本高清pdf电子书打包下载
点赞和在看就是最大的支持❤️