您好,登錄后才能下訂單哦!
這篇“Vue3組件間的通信方式是什么”文章的知識點大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“Vue3組件間的通信方式是什么”文章吧。
父子組件通信我們第一個想到的就是props,我們在子組件顯示聲明所接受的props,然后我們在從父組件傳入對應(yīng)的 key與value, 這樣我們就可以在子組件上接收到父組件傳過來的屬性與值。
具體實現(xiàn)如下:
// children.vue <template> <ul class="list-group"> <li class="list-group-item" v-for="item in list" :key="index"> {{item}} </li> </ul> </template> <script setup> import { defineProps } from 'vue'; const props = defineProps({ list :{ type: Array, default: () => {} } }) </script>
// parent.vue <template> <div class="parent-wrap"> <input type="text" v-model="value" class="form-control" placeholder="請輸入"> <div class="input-group-append"> <button class="btn btn-primary" @click="handleAdd">添加</button> </div> </div> <!-- child --> <childrenVue :list="list"></childrenVue> </template> <script setup> import { ref } from 'vue'; import childrenVue from './children.vue'; const value = ref('') const list = ref(['javaScript', 'Html', 'CSS']) const handleAdd = () =>{ list.value.push(value.value) value = '' } </script>
如上圖所示,我們既實現(xiàn)了在子組件上顯示了父組件傳過來的 list 數(shù)組,還使可以向list添加數(shù)據(jù)使子組件數(shù)據(jù)更新。
當(dāng)我們聊完了props,我們第二個要介紹的就是 vue3 的一個組合式選項 provide 和inject。
projct用于提供可以被后代組件注入的值,而inject用于聲明要通過從上層提供方匹配并注入進(jìn)當(dāng)前組件的屬性。 其代碼實現(xiàn)如下:
// children.vue <template> <ul class="list-group"> <li class="list-group-item" v-for="item in list" :key="item">{{item}}</li> </ul> </template> <script setup> import { inject } from 'vue'; const list = inject('list') </script>
// parent.vue <template> <div class="parent-wrap"> <input type="text" v-model="value" class="form-control" placeholder="請輸入"> <div class="input-group-append"> <button class="btn btn-primary" @click="handleAdd">添加</button> </div> </div> <!-- child --> <childVue /> </template> <script setup> import childVue from "./child.vue"; const { ref, provide, readonly } = require("vue"); const value = ref('') const list = ref(['javaScript', 'HTML', 'CSS']) provide('list', readonly(list.value)) const handleAdd = () => { list.value.push(value.value) } </script>
如上圖所示,我們使用 provide
API向外提供了一個 key 為 list
,值為list.value
,同時將 list,value
設(shè)置成了只讀屬性,防止子組件修改父組件的數(shù)據(jù)源。然后我們 inject
API接收了 list
,實現(xiàn)了父子組件的通信。
上面我介紹了兩種父向子傳值的方法,但在我們開發(fā)中,我們還會遇到子向父組件傳值的情況,那我們該怎么解決呢? 第一個方法就是vue3中的 defineEmits
API,代碼實現(xiàn)如下:
// children.vue <template> <div class="parent-wrap"> <input type="text" v-model="value" class="form-control" placeholder="請輸入" /> <div class="input-group-append"> <button class="btn btn-primary" @click="handleAdd">添加</button> </div> </div> </template> <script setup> const { ref, defineEmits } = require("vue"); const value = ref('') const emits = defineEmits(['add']) //父傳子 // 給父組件傳一個函數(shù) const handleAdd = () => { emits('add', value.value) value.value= '' } </script>
// parent.vue <template> <childVue @add='handleAdd'/> <ul class="list-group"> <li class="list-group-item" v-for="item in list" :key="item">{{item}}</li> </ul> </template> <script setup> import { ref } from '@vue/reactivity'; import childVue from './child.vue'; const list = ref(['javaScript', 'HTML', 'CSS']) const handleAdd = (val) => { list.value.push(val) } </script>
如上圖所示,我們在子組件上emit
一個出了一個 add事件給父組件接收,同時在父組件上調(diào)用來執(zhí)行添加的邏輯,再將 input
的value
變?yōu)榭?,實現(xiàn)了父組件向子組件傳參。
在介紹完 defineEmits
后, 我們再來介紹一種與其有異曲同工之處的v-model:xxx + emit
的方法,實現(xiàn)如下:
// children.vue <template> <div class="parent-wrap"> <input type="text" v-model="value" class="form-control" placeholder="請輸入" /> <div class="input-group-append"> <button class="btn btn-primary" @click="handleAdd">添加</button> </div> </div> </template> <script setup> const { ref, defineProps, defineEmits } = require("vue"); const value = ref('') const props = defineProps({ list: { type: Array, default: () => [] } }) const emits = defineEmits(['list']) // 給父組件一點東西 const handleAdd = () => { // props.list.push(value.value) //不建議直接修改props的值 把握不住數(shù)據(jù)源的流轉(zhuǎn) const arr = props.list arr.push(value.value) emits('list', arr) value.value= '' } </script>
<template> <childVue v-model:list="list" @list ='add'/> <ul class="list-group"> <li class="list-group-item" v-for="item in list" :key="item">{{item}}</li> </ul> </template> <script setup> import { ref } from '@vue/reactivity'; import childVue from './child.vue'; const list = ref(['javaScript', 'HTML', 'CSS']) const add =(val) => { console.log(val); console.log(list); } </script>
再和上面的defineEmits
方法比較完以后,相信大家也看出了這兩者的異曲同工在哪了。我們這里是先將父組件的list
傳給了子組件,再在子組件修改了父組件的數(shù)據(jù)源,同時再emit
還給父組件,實現(xiàn)了子組件向父組件傳值。
以上就是關(guān)于“Vue3組件間的通信方式是什么”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對大家有幫助,若想了解更多相關(guān)的知識內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。