您好,登錄后才能下訂單哦!
v-model介紹
熟悉Vue的小伙伴們都知道 v-model 是Vue的一個(gè)很大的特色,可以實(shí)現(xiàn)雙向數(shù)據(jù)綁定。但本質(zhì)上呢,它不過(guò)是語(yǔ)法糖,它負(fù)責(zé)監(jiān)聽(tīng)用戶(hù)的輸入事件以更新數(shù)據(jù)。
以下摘取自Vue官方文檔
v-model 在內(nèi)部使用不同的屬性為不同的輸入元素并拋出不同的事件:
如何巧妙利用 v-model實(shí)現(xiàn)父子組件傳值
通常子組件某個(gè)變量更新,并需要告知父組件時(shí),需要子組件觸發(fā)事件并父組件監(jiān)聽(tīng)該事件。
但是熟悉上面 v-model 的實(shí)現(xiàn)原理后,我們可以巧妙地運(yùn)用這一原理(v-model 在內(nèi)部使用不同的屬性為不同的輸入元素并拋出不同的事件)。
方法總結(jié):
1.子組件設(shè) value 為props屬性,并且不主動(dòng)改變 value 值
2.子組件通過(guò) this.$emit('input', 'updateValue') 將 updateValue 值傳給父組件
3.父組件通過(guò) 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í)通過(guò) this.$emit('input', ++sum) 將更新后的值傳給父組件(前提:傳給父組件的值一定是你想賦給 value 的)
<template> <div> <button @click="increase" >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>
父組件
父組件中,通過(guò) 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è)過(guò)程是首先子組件通過(guò) $emit('input') 更新父組件的本地變量,然后子組件中的 value 屬性通過(guò) props 得以更新
總結(jié)
這種方式尤其適合子父組件傳參的情況(子父組件同步更新)
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。