vue3子傳父v-model輔助值傳遞的步驟
title: 子組件向父組件傳值
date: 2025-04-27 19:11:09
tags: vue3 vue3子傳父——v-model輔助值傳遞
一、子組件發(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
深入理解vue.js中$watch的oldvalue與newValue
這篇文章主要給大家介紹了關(guān)于vue.js中$watch的oldvalue與newValue的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，并且介紹了關(guān)于watch的其他測試，對(duì)大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來一起看看吧。2017-08-08
這篇文章主要介紹了如何利用vite快速搭建vue3項(xiàng)目問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要給大家分享的是 Vue中props用法介紹，? 在Vue中通過props,可以將原本孤立的組件串聯(lián)起來，也就是可以子組件可以接收父組件傳遞過來的data，下面我們一起進(jìn)入文章看看內(nèi)容的詳細(xì)介紹吧,需要的朋友也可以參考一下2021-11-11
在Vue模板中啟用這些表現(xiàn)力庫插件的最簡單方法是在初始化項(xiàng)目時(shí)安裝它們,或使用 npm install（或 yarn add）安裝包,這篇文章主要介紹了Vue3中如何使用SCSS編寫樣式,需要的朋友可以參考下2023-12-12
vue常用事件v-on:click詳解事件對(duì)象,事件冒泡,事件默認(rèn)行為
這篇文章主要介紹了vue常用事件之v-on:click?以及事件對(duì)象，事件冒泡，事件默認(rèn)行為,其實(shí)v-on后面跟的不止是click事件也可以是其他的事件，用法均相似，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue 前端導(dǎo)出后端返回的excel文件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue如何動(dòng)態(tài)給data中添加變量問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue+Element-UI實(shí)現(xiàn)上傳圖片并壓縮
這篇文章主要為大家詳細(xì)介紹了Vue+Element-UI實(shí)現(xiàn)上傳圖片并壓縮功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
今天小編就為大家分享一篇Vue引用Swiper4插件無法重寫分頁器樣式的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue.js 實(shí)現(xiàn)點(diǎn)擊展開收起動(dòng)畫效果
這篇文章主要介紹了vue.js 實(shí)現(xiàn)點(diǎn)擊展開收起動(dòng)畫效果，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07