使用Vue如何實(shí)現(xiàn)雙向綁定自定義組件

這篇文章將為大家詳細(xì)講解有關(guān)使用Vue如何實(shí)現(xiàn)雙向綁定自定義組件，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

前言

無論在任何的語言或框架中，我們都提倡代碼的復(fù)用性。對(duì)于Vue來說也是如此，相同的代碼邏輯會(huì)被封裝成組件，除了復(fù)用之外，更重要的是統(tǒng)一管理提高開發(fā)效率。我真就接手過一個(gè)項(xiàng)目，多個(gè)頁面都會(huì)用到的列表，沒有去封裝列表組件，只要有一點(diǎn)改動(dòng)，每個(gè)頁面都得加上。很肯定的說，沒有用組件化開發(fā)的Vue項(xiàng)目是沒有靈魂的。所以如何封裝一個(gè)優(yōu)雅且復(fù)用性高的組件成為我們必需的技能。

Tab自定義組件

首先來看一個(gè)Tab組件的實(shí)現(xiàn)，看看它存在什么問題，哪里可以改進(jìn)？

效果

組件

<template>
 <div class="tabs">
  <div 
   class="tab-item" 
   :class="{'tab--active':item===activeName}"
   v-for="(item,index) in tabs" 
   :key="index" 
   @click="tabChange(item)">
   {{item}}
  </div>
 </div>
</template>

<script>
export default {
 props:{
  tabs:{
   type: Array,
   default: ()=> []
  },
  activeName:{
   type: String,
   default: ''
  }
 },
 methods:{
  tabChange(item){
   this.$emit('tabChange',item)
  }
 },
}
</script>

使用

<template>
 <div>
  <Tabs :tabs="tabs" :activeName="activeName" @tabChange="tabChange" />
 </div>
</template>

<script>
import Tabs from '../components/Tabs'
export default {
 components:{
  Tabs
 },
 data(){
  return{
   tabs:['黃金體驗(yàn)','敗者食塵','緋紅之王','白金之星','波紋疾走'],
   activeName: '黃金體驗(yàn)'
  }
 },
 methods:{
  tabChange(item){
   this.activeName = item
  }
 },
}
</script>

這個(gè)組件最大的問題就是，activeName 需要使用者額外通過事件來手動(dòng)更新，假如有另一個(gè)使用者接手，在不知道這種情況下使用，會(huì)出現(xiàn)tab沒有切換的情況。然后要去看組件內(nèi)部實(shí)現(xiàn)，再回來修改代碼，很顯然這樣的組件是失敗的。本著所有的臟活累活都由組件實(shí)現(xiàn)的原則，理想的狀態(tài)應(yīng)該是使用者不需要管理 activeName，而是由組件內(nèi)部去更新。

如何改進(jìn)修改prop?

可能有人會(huì)想到，既然要由內(nèi)部管理，那在組件內(nèi)部修改prop的值是不是就可以了？來看下這樣的做法是否可行
修改組件tabChange方法，在點(diǎn)擊時(shí)更新prop的值

tabChange(item){
 this.activeName = item
 this.$emit('tabChange',item)
}

使用時(shí)，控制臺(tái)拋出警告

由于prop是單向數(shù)據(jù)流，父級(jí)prop的更新會(huì)向下流動(dòng)到子組件中，相反的在子組件內(nèi)部直接更新狀態(tài)，會(huì)導(dǎo)致數(shù)據(jù)的流向不明確。例如，在父組件中有多個(gè)子組件依賴同一個(gè)屬性，其中一個(gè)子組件更新該屬性，會(huì)引發(fā)其余子組件發(fā)生改變，發(fā)生問題時(shí)不容易被找到，因此Vue不推薦我們這樣做。另外，在父組件發(fā)生更新時(shí)，子組件的prop會(huì)被刷新為最新的值。

單向數(shù)據(jù)流: https://cn.vuejs.org/v2/guide/components-props.html#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81

正解：model選項(xiàng)改進(jìn)組件

組件model選項(xiàng)

允許一個(gè)自定義組件在使用 v-model 時(shí)定制 prop 和 event。默認(rèn)情況下，一個(gè)組件上的 v-model 會(huì)把 value 用作 prop 且把 input 用作 event，但是一些輸入類型比如單選框和復(fù)選框按鈕可能想使用 value prop 來達(dá)到不同的目的。使用 model 選項(xiàng)可以回避這些情況產(chǎn)生的沖突。

model: https://cn.vuejs.org/v2/api/

在model選項(xiàng)里，我們可以綁定一個(gè)屬性，并為其添加事件，只需在調(diào)用方法時(shí)傳入值即可更新屬性。

<script>
export default {
 model:{
  prop: 'activeName',
  event: 'update'
 },
 props:{
  tabs:{
   type: Array,
   default: ()=> []
  },
  activeName:{
   type: String,
   default: ''
  }
 },
 methods:{
  tabChange(item){
   this.$emit('update',item) // 這里更新activeName
   this.$emit('tabChange',item)
  }
 }
}
</script>

注意你仍然需要在組件的 props 選項(xiàng)里聲明 prop。

使用

使用組件雙向綁定后，屬性在組件內(nèi)部被更新時(shí)，父組件的 activeName 也會(huì)隨之更新，這樣使用者可以很明確的知道數(shù)據(jù)可能會(huì)被修改。

<Tabs :tabs="tabs" v-model="activeName" />

總結(jié)

使用組件的model選項(xiàng)實(shí)現(xiàn)自定義組件雙向綁定，在組件內(nèi)部通過事件更新屬性值，這樣的自定義組件使用起來更優(yōu)雅。其實(shí)通過model選項(xiàng)的方式去修改父級(jí)屬性，我認(rèn)為有點(diǎn)違反了單向數(shù)據(jù)流的原則。本來單向數(shù)據(jù)流是不允許子級(jí)修改父級(jí)屬性的，只是使用v-model的語法糖，看起來會(huì)讓數(shù)據(jù)流向顯得更加明確，恰好彌補(bǔ)這個(gè)缺點(diǎn)。

關(guān)于使用Vue如何實(shí)現(xiàn)雙向綁定自定義組件就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。