巧妙運(yùn)用v-model實(shí)現(xiàn)父子組件傳值的方法示例
v-model介紹
熟悉Vue的小伙伴們都知道 v-model 是Vue的一個(gè)很大的特色，可以實(shí)現(xiàn)雙向數(shù)據(jù)綁定。但本質(zhì)上呢，它不過是語法糖，它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)。
以下摘取自Vue官方文檔
v-model 在內(nèi)部使用不同的屬性為不同的輸入元素并拋出不同的事件：
- text 和 textarea 使用 value 屬性和 input 事件；
- checkbox 和 radio 使用 checked 屬性和 change 事件；
- select 字段將 value 作為 prop 并將 change 作為事件。
如何巧妙利用 v-model實(shí)現(xiàn)父子組件傳值
通常子組件某個(gè)變量更新，并需要告知父組件時(shí)，需要子組件觸發(fā)事件并父組件監(jiān)聽該事件。
但是熟悉上面 v-model 的實(shí)現(xiàn)原理后，我們可以巧妙地運(yùn)用這一原理（v-model 在內(nèi)部使用不同的屬性為不同的輸入元素并拋出不同的事件）。
方法總結(jié)：
1.子組件設(shè) value 為props屬性，并且不主動(dòng)改變 value 值
2.子組件通過 this.$emit('input', 'updateValue') 將 updateValue 值傳給父組件
3.父組件通過 v-model="localValue" 綁定一個(gè)本地變量，即可實(shí)現(xiàn)子組件value值與父組件updateValue 值同步更新
舉例
子組件
子組件，包含一個(gè)button，并且將 value 屬性設(shè)為props（ 因?yàn)関-model使用的是 value屬性 ）。
點(diǎn)擊button時(shí)，sum值加1，同時(shí)通過 this.$emit('input', ++sum) 將更新后的值傳給父組件（前提：傳給父組件的值一定是你想賦給 value 的）
<template>
<div>
<button @click="increase" style="border: 1px solid black">increase</button>
</div>
</template>
<script>
let sum = 0
export default {
name: 'vmodel',
props: {
value: {
type: Number,
default: 0
}
},
methods: {
increase () {
this.$emit('input', ++sum)
console.log('value1', this.value)
setTimeout(() => {
console.log('value2', this.value)
}, 50)
}
}
}
</script>
父組件
父組件中，通過 v-model 綁定一個(gè)本地變量，即可實(shí)現(xiàn)子父組件同步更新
<div>
<increase v-model="rangeValue"></increase>
<p>value:{{rangeValue}}</p>
</div>
<script>
data () {
return {
rangeValue: 0
}
}
</script>
實(shí)際上，這個(gè)過程是首先子組件通過 $emit('input') 更新父組件的本地變量，然后子組件中的 value 屬性通過 props 得以更新
總結(jié)
這種方式尤其適合子父組件傳參的情況（子父組件同步更新）
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue3+vite+tdesign實(shí)現(xiàn)日歷式可編輯的排課班表填寫功能
本文介紹了如何使用Vue3和tdesign實(shí)現(xiàn)一個(gè)日歷式、可編輯的排班填寫功能,開發(fā)過程中面臨了年份和月份下拉框的實(shí)現(xiàn)、周期顯示以及可編輯日歷的樣式和數(shù)據(jù)獲取等挑戰(zhàn),感興趣的朋友一起看看吧2025-01-01
Vue過渡效果之CSS過渡詳解(結(jié)合transition,animation,animate.css)
Vue 在插入、更新或者移除 DOM 時(shí)，提供多種不同方式的應(yīng)用過渡效果。本文將從CSS過渡transition、CSS動(dòng)畫animation及配合使用第三方CSS動(dòng)畫庫(如animate.css)這三方面來詳細(xì)介紹Vue過渡效果之CSS過渡2020-02-02
這篇文章主要介紹了解決vue過濾器filters獲取不到this對象的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要介紹了仿vue-cli搭建屬于自己的腳手架的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要給大家介紹了關(guān)于v-model及其修飾符的相關(guān)資料,v-model指令有三個(gè)可以選用的修飾符：.lazy、.number以及.trim,本文通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-11-11
這篇文章主要介紹了Vue中的MVVM模式使用及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vue2.x 對象劫持的原理實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue elementui form表單驗(yàn)證的實(shí)現(xiàn)
這篇文章主要介紹了vue elementui form表單驗(yàn)證的實(shí)現(xiàn),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
vue項(xiàng)目百度地圖如何自定義標(biāo)注marker
這篇文章主要介紹了vue項(xiàng)目百度地圖如何自定義標(biāo)注marker問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue 2.5.2下axios + express 本地請求404的解決方法
下面小編就為大家分享一篇Vue 2.5.2下axios + express 本地請求404的解決方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02