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:
Mula melakukan sesuatu~
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
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 '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>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 'vue'
const props = defineProps({
list: {
type: Array,
default: () => [],
},
})
</script>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 'vue'
const value = ref('')
const emits = defineEmits(['add'])
const handleSubmit = () => {
emits('add', value.value)
value.value = ''
}
</script>emitKod komponen induk adalah seperti berikut:
<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. Kaedah v-model
ialah gula sintaks yang sangat baik dalam Vue Sebagai contoh, kod berikutv-model
<ChildComponent v-model:title="pageTitle" />
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
v-modelSubkomponen
<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>, kemudian tambah props untuk menentukan acara. emitsemit
ialah kaedah penulisan tetap dalam Vue dan4 kaedah rujukanmewakili nama atribut tertentu dalam
Ia agak mudah untuk digunakan dalam komponen induk Kodnya adalah seperti berikut:update:*.*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>, kita perlu menentukan objek Ref dengan nama yang sama, yang boleh diakses selepas komponen itu dipasang. this.$refs.namerefKod sampel 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 '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> 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
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
<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> untuk data pindahkan, Cuba balut data untuk menghalang komponen anak daripada mengubah suai data yang diluluskan oleh ibu bapa 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 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 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)provide. readonly6. Bas Acara
7. Alat pengurusan negeri
Ditulis pada penghujung
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
