快捷導(dǎo)航

vue3子傳父v-model輔助值傳遞的步驟

更新時(shí)間：2025年05月08日 14:33:49 作者：前端燁

這篇文章主要介紹了vue3子傳父v-model輔助值傳遞的步驟,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

一、子組件發(fā)出

1.步驟一創(chuàng)建emit對(duì)象

這個(gè)對(duì)象使用的是defineEmits進(jìn)行的創(chuàng)建，emit的中文意思又叫發(fā)出，你就把他當(dāng)成一個(gè)發(fā)出數(shù)據(jù)的函數(shù)方法來用。

const emit = defineEmits(['update:要傳遞的對(duì)象1','update:要傳遞的對(duì)象2']);
const emit = defineEmits(['update:selectSummary']);

**注意：**要寫’update:'的原因是這是vue3的一種約定方式，你可以不這么寫，但是一旦父組件調(diào)用你的方式涉及到了v-model,這種情況下你必須寫’update：’這種形式，要不然父組件找不到你傳出來的數(shù)據(jù)。

2.子組件使用emit對(duì)象

一般來說會(huì)寫一個(gè)監(jiān)聽函數(shù)或者計(jì)算函數(shù)，來監(jiān)聽想向外傳遞的數(shù)據(jù)，以達(dá)到子組件的數(shù)據(jù)一改變就傳遞的目的。但方式多樣看自己的需求寫相關(guān)的函數(shù)，適當(dāng)時(shí)機(jī)觸發(fā)就可以。

// 監(jiān)聽選擇的對(duì)象數(shù)組，濾出想要的數(shù)據(jù)
watch(selection, () => {
    let arr = selection.value.map((item) => { //處理數(shù)據(jù)
      return item.content;
    });
    emit('update:selectSummary', arr);//發(fā)出處理好的數(shù)據(jù)
  });

二、父組件接受

使用v-model接收對(duì)象。在父組件中使用v-model來進(jìn)行對(duì)象的接收。這是一種約定

v-model:名字=‘父組件對(duì)象’，

emit(‘update:名字‘,子組件對(duì)象)

<chird v-model:selectSummary="selectSummary" /> // 可以寫一樣的名字
<chird v-model:selectSummary="summary" /> // 也可以寫不一樣的名字

注意：

v-model實(shí)際上只是一種雙向綁定簡寫方法

<ChildComponent v-model:selectSummary="summary" />

實(shí)際寫法

<ChildComponent 
  :selectSummary="summary" // summary將值傳遞給子組件的selectSummary對(duì)應(yīng)的對(duì)象
  @update:selectSummary="(newValue) => summary = newValue"  //更新函數(shù)，值給summary
/>

所以可以直接寫 @update:selectSummary=‘handleFunction’
handleFunction是函數(shù)名自帶參數(shù)的

let handleFunction = (item)=>{
	log(item);//這個(gè)就是子組件傳來的數(shù)據(jù)
}

到此這篇關(guān)于vue3子傳父v-model輔助值傳遞的步驟的文章就介紹到這了,更多相關(guān)vue v-model傳遞內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

簡單方法實(shí)現(xiàn)Vue?無限滾動(dòng)組件示例
這篇文章主要為大家介紹了簡單方法實(shí)現(xiàn)Vue?無限滾動(dòng)組件示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
vue實(shí)現(xiàn)面包屑的方法
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)面包屑的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
vue cli3適配所有端方案的實(shí)現(xiàn)
這篇文章主要介紹了vue cli3適配所有端方案的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04
vue-cropper組件實(shí)現(xiàn)圖片切割上傳
這篇文章主要為大家詳細(xì)介紹了vue-cropper組件實(shí)現(xiàn)圖片切割上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
Vue @click.stop阻止事件向祖先元素傳遞方式(事件冒泡)
在Vue中,使用@click.stop修飾符可以阻止事件向父級(jí)元素傳遞,從而實(shí)現(xiàn)單擊父級(jí)元素執(zhí)行函數(shù),而單擊子元素不執(zhí)行函數(shù)的需求
2025-02-02
Vue3初探之ref、reactive以及改變數(shù)組的值
在setup函數(shù)中,可以使用ref函數(shù)和reactive函數(shù)來創(chuàng)建響應(yīng)式數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Vue3初探之ref、reactive以及改變數(shù)組值的相關(guān)資料,需要的朋友可以參考下
2022-09-09
vue中el-table合并列的具體實(shí)現(xiàn)
本文主要介紹了vue中el-table合并列的具體實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
Vue項(xiàng)目安裝使用moment.js方式
文章介紹了如何在Vue項(xiàng)目中安裝和使用moment.js,包括安裝步驟、導(dǎo)入方法、漢化設(shè)置以及在Vue實(shí)例中使用moment.js進(jìn)行日期處理
2024-11-11
利用Vue與D3.js創(chuàng)建交互式數(shù)據(jù)可視化
在現(xiàn)代Web開發(fā)中,數(shù)據(jù)可視化是一個(gè)引人矚目的熱點(diǎn)領(lǐng)域,從簡單的圖表到復(fù)雜的交互式儀表盤,數(shù)據(jù)可視化能夠幫助用戶更好地理解數(shù)據(jù),而Vue與D3.js的結(jié)合則為我們提供了構(gòu)建這些可視化效果的強(qiáng)大工具,本文將向您展示如何利用Vue與D3.js創(chuàng)建一個(gè)基本的交互式數(shù)據(jù)可視化項(xiàng)目
2025-02-02
vue實(shí)現(xiàn)彈框遮罩點(diǎn)擊其他區(qū)域彈框關(guān)閉及v-if與v-show的區(qū)別介紹
vue如何簡單的實(shí)現(xiàn)彈框,遮罩,點(diǎn)擊其他區(qū)域關(guān)閉彈框, 簡單的思路是以一個(gè)div作為遮罩,這篇文章給大家詳細(xì)介紹了vue實(shí)現(xiàn)彈框遮罩點(diǎn)擊其他區(qū)域彈框關(guān)閉及v-if與v-show的區(qū)別介紹，感興趣的朋友一起看看吧
2018-09-09