役立つ情報の共有: Vue3 コンポーネントと通信する 7 つの方法!
- 青灯夜游転載
- 2022-02-16 10:20:322642ブラウズ
コンポーネントは Vue のコア機能であり、再利用可能な Vue インスタンスですが、コンポーネント インスタンスのスコープは互いに独立しているため、異なるコンポーネント間のデータは相互に直接参照できません。では、コンポーネント間でデータを関連付けるにはどうすればよいでしょうか?どのように通信してデータを転送するのですか?次の記事では 7 つのコンポーネント通信方法を紹介します。
詳細については、Vue Document の 2 つのメソッドの説明を参照してください。
注:この記事では、次の 7 つのコンポーネント通信メソッドを紹介します:php 中国語オンライン ワーク では、vue コースの最新バージョンの指導も開始しています。興味のある友人は、詳細を学ぶことができます。
- 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 '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>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 '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>親コンポーネントでは、子コンポーネントのカスタム イベントをリッスンし、対応する追加操作を実行するだけです。
3. v-model メソッド
v-model は、次のコードのように、Vue の優れた構文糖衣です。<pre class="brush:html;toolbar:false;"><ChildComponent v-model:title="pageTitle" /></pre> 省略形以下のコードの
<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 と 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 'vue'
import ChildComponents from './child.vue'
const list = ref(['JavaScript', 'HTML', 'CSS'])
</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 '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 取得されたコンポーネントのパブリック インスタンスは、**# で宣言されたバインディング を公開しません。 ＃＃＃＃。 公開する必要がある場合は、***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 '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>データに provide
を使用する場合は、次の点に注意してください。 transfer、子コンポーネントが親から渡されたデータを変更しないように、データを
readonly ラップしてみてください。 イベント バスは Vue3 から削除されましたが、サードパーティ ツールの助けを借りて実現できます。Vue は正式に mitt または を推奨します。 tiny-emitter； ほとんどの場合、グローバル イベント バスを使用してコンポーネント通信を実装することは推奨されません。比較的単純で粗雑ではありますが、イベント バスの維持は、詳細については、特定のツール Vuex および Pinia は、Vue3 の状態管理ツールです。これを使用します。この 2 つのツールは、コンポーネント通信を簡単に実現できます。この 2 つのツールは、比較的強力であるため、ここでは示しません。詳細については、ドキュメントを確認してください Web フロントエンド チュートリアル)6. イベント バス
7 のドキュメントを参照してください。状態管理ツール
最後に書きました
##この記事はここまでです 以上です 一般的には比較的単純で、難しいことは何もありません。 この記事が少しでもお役にたてましたら、必要なときに見つからないように、「いいね！」や「コメント」をして集めてください。 記事に間違いがある場合は、修正してください~
元のアドレス: https://juejin.cn/post/7062740057018335245著者: Yiwan Zhou
(学習ビデオ共有: