Berkongsi maklumat berguna: 7 cara untuk berkomunikasi dengan komponen Vue3!

Komponen ialah fungsi teras Vue dan merupakan tika Vue yang boleh diguna semula tetapi skop tika komponen adalah bebas antara satu sama lain, yang bermaksud bahawa data antara komponen yang berbeza tidak boleh merujuk secara langsung antara satu sama lain. Jadi, bagaimana untuk mengaitkan data antara komponen? Bagaimana untuk berkomunikasi dan memindahkan data? Artikel berikut akan berkongsi dengan anda tujuh kaedah komunikasi komponen Saya harap ia akan membantu anda!

Artikel ini menggunakan kaedah penulisan API gabungan <script setup></script> Berbanding dengan jenis pilihan, API gabungan ialah Kaedah penulisan adalah lebih percuma . Untuk butiran, sila rujuk penerangan dua kaedah dalam dokumentasi Vue.

Nota: php Chinese Online Work juga telah mula mengajar versi terkini kursus vue Rakan-rakan yang berminat boleh mengetahui lebih lanjut.

Artikel ini akan memperkenalkan tujuh kaedah komunikasi komponen berikut:

• props
• memancarkan
• v-model
• refs
• menyediakan/menyuntik
• eventBus
• vuex/pinia (alat pengurusan status)

Mula melakukan sesuatu~

Beri saya contoh

Bak kata pepatah, jika anda tidak menulis demo semasa belajar, anda menjadi hooligan~

Artikel ini akan memfokuskan pada demo berikut, seperti yang ditunjukkan dalam gambar di bawah:

Dalam gambar di atas, senarai dan kotak input masing-masing adalah komponen ibu bapa dan anak kaedah pemindahan nilai yang berbeza, siapa yang mungkin merupakan komponen induk dan siapa anak Komponen akan dilaraskan. Kaedah

1. Kaedah prop

Props ialah kaedah laluan daripada ibu bapa kepada anak yang paling biasa dalam Vue, dan ia agak mudah digunakan. [Cadangan berkaitan: tutorial video vue.js]

Menurut demo di atas, kami mentakrifkan data dan operasi pada data dalam komponen induk dan komponen anak hanya memaparkan senarai ;

Kod komponen induk adalah seperti berikut:

<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>

Komponen anak hanya perlu memaparkan nilai yang diluluskan oleh komponen induk Kod adalah seperti berikut:

<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. Kaedah Emit Kaedah

emit juga merupakan kaedah komunikasi komponen yang paling biasa dalam Vue. Kaedah ini digunakan untuk anak kepada ibu bapa >Mengikut demo di atas, kami mentakrifkan senarai dalam komponen Induk dan komponen anak hanya perlu melepasi nilai tambah.

Kod subkomponen adalah seperti berikut:

Selepas mengklik butang [Tambah] dalam subkomponen,

<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>

acara tersuai dan lulus nilai tambah sebagai parameter.

emitKod komponen induk adalah seperti berikut:

Dalam komponen induk, anda hanya perlu mendengar peristiwa tersuai komponen anak, dan kemudian melakukan operasi penambahan yang sepadan.

<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. Kaedah v-model

ialah gula sintaks yang sangat baik dalam Vue Sebagai contoh, kod berikut

v-model

ialah kod berikut format singkatan kod

<ChildComponent v-model:title="pageTitle" />

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

sememangnya jauh lebih mudah Sekarang mari kita lihat demo di atas dan cara menggunakan v-model untuk melaksanakannya.

v-modelSubkomponen

Dalam subkomponen kita mula-mula mentakrifkan

<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>

dan

, kemudian tambah props untuk menentukan acara. emitsemit

Nota:

ialah kaedah penulisan tetap dalam Vue dan

mewakili nama atribut tertentu dalam update:*. *props

Ia agak mudah untuk digunakan dalam komponen induk Kodnya adalah seperti berikut:

4 kaedah rujukan

<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>

Apabila menggunakan API pilihan , kita boleh lulus kaedah

untuk mendapatkan elemen atau komponen yang ditentukan, tetapi kaedah ini tidak boleh digunakan dalam gabungan API. Jika kita ingin mendapatkan komponen atau elemen melalui

, kita perlu menentukan objek Ref dengan nama yang sama, yang boleh diakses selepas komponen itu dipasang. this.$refs.namerefKod sampel adalah seperti berikut:

Kod subkomponen adalah seperti berikut:

<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>

Komponen ditutup secara lalai, yang diperolehi melalui templat

Kepada contoh awam komponen, setup tidak akan mendedahkan sebarang ikatan ref yang diisytiharkan dalam **<script setup>. Jika anda perlu mendedahkannya, anda perlu mendedahkannya melalui ******** API**. defineExpose5. Kaedah menyediakan/menyuntik

dan

ialah sepasang API yang disediakan dalam Vue ini boleh merealisasikan pemindahan data daripada komponen induk kepada komponen anak, tanpa mengira daripada tahap yang mendalam, semua boleh dicapai melalui pasangan API ini. Kod sampel adalah seperti berikut: provideinjectKomponen induk

Komponen anak

<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>

Perlu diperhatikan bahawa apabila

<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>

menggunakan

untuk data pindahkan, Cuba balut data untuk menghalang komponen anak daripada mengubah suai data yang diluluskan oleh ibu bapa provide. readonly

6. Bas Acara

Bas acara telah dialih keluar daripada Vue3, tetapi ia boleh dilakukan dengan bantuan alat pihak ketiga yang disyorkan oleh Vue secara rasmi mitt atau tiny-emitter;

Dalam kebanyakan kes, tidak disyorkan untuk menggunakan bas acara global untuk melaksanakan komunikasi komponen Walaupun ia agak mudah dan kasar, mengekalkan bas acara adalah masalah besar dalam jangka panjang, jadi saya tidak akan menerangkannya di sini Untuk butiran, anda boleh membaca dokumentasi alat khusus

7. Alat pengurusan negeri

Vuex dan Pinia ialah alat pengurusan negeri dalam Vue3 Gunakan ini Kedua-dua alatan ini boleh merealisasikan komunikasi komponen dengan mudah, ia tidak akan ditunjukkan di sini untuk butirannya

Ditulis pada penghujung

Itu sahaja untuk artikel ini Secara umumnya, ia agak mudah dan tidak ada yang rumit.

Sekiranya artikel ini berguna kepada anda, sila like, komen dan simpan untuk mengelakkan ia tidak dapat ditemui apabila anda memerlukannya.

Jika terdapat sebarang kesilapan dalam artikel, sila betulkan saya~

Alamat asal: https://juejin.cn/post/7062740057018335245

Pengarang: Yiwan Zhou

(Belajar perkongsian video: tutorial bahagian hadapan web)