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

v-model介紹

創(chuàng)新互聯(lián)建站長期為成百上千客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為高臺企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)，高臺網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

熟悉Vue的小伙伴們都知道 v-model 是Vue的一個很大的特色，可以實現(xiàn)雙向數(shù)據(jù)綁定。但本質(zhì)上呢，它不過是語法糖，它負責監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)。
以下摘取自Vue官方文檔

v-model 在內(nèi)部使用不同的屬性為不同的輸入元素并拋出不同的事件：

text 和 textarea 使用 value 屬性和 input 事件；
checkbox 和 radio 使用 checked 屬性和 change 事件；
select 字段將 value 作為 prop 并將 change 作為事件。

如何巧妙利用 v-model實現(xiàn)父子組件傳值

通常子組件某個變量更新，并需要告知父組件時，需要子組件觸發(fā)事件并父組件監(jiān)聽該事件。

但是熟悉上面 v-model 的實現(xiàn)原理后，我們可以巧妙地運用這一原理（v-model 在內(nèi)部使用不同的屬性為不同的輸入元素并拋出不同的事件）。

方法總結(jié)：

1.子組件設(shè) value 為props屬性，并且不主動改變 value 值
2.子組件通過 this.$emit('input', 'updateValue') 將 updateValue 值傳給父組件
3.父組件通過 v-model="localValue" 綁定一個本地變量，即可實現(xiàn)子組件value值與父組件updateValue 值同步更新

舉例

子組件

子組件，包含一個button，并且將 value 屬性設(shè)為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 綁定一個本地變量，即可實現(xiàn)子父組件同步更新

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

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

總結(jié)

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享題目：巧妙運用v-model實現(xiàn)父子組件傳值的方法示例
文章來源：http://bm7419.com/article12/jceggc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、網(wǎng)站收錄、商城網(wǎng)站、搜索引擎優(yōu)化、ChatGPT

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容