巧妙運用v-model實現父子組件傳值的方法示例

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" 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 綁定一個本地變量，即可實現子父組件同步更新

<div>
 <increase v-model="rangeValue"></increase>
 <p>value:{{rangeValue}}</p>
</div>
<script>
data () {
 return {
 rangeValue: 0
 }
}
</script>

實際上，這個過程是首先子組件通過 $emit('input') 更新父組件的本地變量，然后子組件中的 value 屬性通過 props 得以更新

總結

這種方式尤其適合子父組件傳參的情況（子父組件同步更新）

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com