溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
v-model介紹
熟悉Vue的小伙伴們都知道 v-model 是Vue的一個很大的特色，可以實現雙向數據綁定。但本質上呢，它不過是語法糖，它負責監聽用戶的輸入事件以更新數據。
以下摘取自Vue官方文檔
v-model 在內部使用不同的屬性為不同的輸入元素并拋出不同的事件：
如何巧妙利用 v-model實現父子組件傳值
通常子組件某個變量更新，并需要告知父組件時，需要子組件觸發事件并父組件監聽該事件。
但是熟悉上面 v-model 的實現原理后，我們可以巧妙地運用這一原理（v-model 在內部使用不同的屬性為不同的輸入元素并拋出不同的事件）。
方法總結：
1.子組件設 value 為props屬性，并且不主動改變 value 值
2.子組件通過 this.$emit('input', 'updateValue') 將 updateValue 值傳給父組件
3.父組件通過 v-model="localValue" 綁定一個本地變量，即可實現子組件value值與父組件updateValue 值同步更新
舉例
子組件
子組件，包含一個button，并且將 value 屬性設為props（ 因為v-model使用的是 value屬性 ）。
點擊button時，sum值加1，同時通過 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>
父組件
父組件中，通過 v-model 綁定一個本地變量，即可實現子父組件同步更新
<div>
<increase v-model="rangeValue"></increase>
<p>value:{{rangeValue}}</p>
</div>
<script>
data () {
return {
rangeValue: 0
}
}
</script>
實際上，這個過程是首先子組件通過 $emit('input') 更新父組件的本地變量，然后子組件中的 value 屬性通過 props 得以更新
總結
這種方式尤其適合子父組件傳參的情況（子父組件同步更新）
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
