沐鳴怎麼當代理?_Vue – 自定義組件雙向綁定

前言

無論在任何的語言或框架中,我們都提倡代碼的復用性。對於vue來說也是如此,相同的代碼邏輯會被封裝成組件,除了復用之外,更重要的是統一管理提高開發效率。我真就接手過一個項目,多個頁面都會用到的列表,沒有去封裝列表組件,只要有一點改動,每個頁面都得加上。很肯定的說,沒有用組件化開發的vue項目是沒有靈魂的。所以如何封裝一個優雅且復用性高的組件成為我們必需的技能。

Tab自定義組件

首先來看一個Tab組件的實現,看看它存在什麼問題,哪裡可以改進?

組件

<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:['黃金體驗','敗者食塵','緋紅之王','白金之星','波紋疾走'],
      activeName: '黃金體驗'
    }
  },
  methods:{
    tabChange(item){
      this.activeName = item
    }
  },
}
</script>

分析

這個組件最大的問題就是,activeName 需要使用者額外通過事件來手動更新,假如有另一個使用者接手,在不知道這種情況下使用,會出現tab沒有切換的情況。然後要去看組件內部實現,再回來修改代碼,很顯然這樣的組件是失敗的。本着所有的臟活累活都由組件實現的原則,理想的狀態應該是使用者不需要管理 activeName,而是由組件內部去更新

如何改進

修改prop?

可能有人會想到,既然要由內部管理,那在組件內部修改prop的值是不是就可以了?來看下這樣的做法是否可行
修改組件tabChange方法,在點擊時更新prop的值

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

使用時,控制台拋出警告

由於prop是單向數據流,父級prop的更新會向下流動到子組件中,相反的在子組件內部直接更新狀態,會導致數據的流向不明確。例如,在父組件中有多個子組件依賴同一個屬性,其中一個子組件更新該屬性,會引發其餘子組件發生改變,發生問題時不容易被找到,因此Vue不推薦我們這樣做。另外,在父組件發生更新時,子組件的prop會被刷新為最新的值。
單向數據流: 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選項

改進組件

組件model選項

允許一個自定義組件在使用 v-model 時定製 prop 和 event。默認情況下,一個組件上的 v-model 會把 value 用作 prop 且把 input 用作 event,但是一些輸入類型比如單選框和複選框按鈕可能想使用 value prop 來達到不同的目的。使用 model 選項可以迴避這些情況產生的衝突。

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

在model選項里,我們可以綁定一個屬性,併為其添加事件,只需在調用方法時傳入值即可更新屬性。

<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 選項里聲明 prop。

使用

使用組件雙向綁定后,屬性在組件內部被更新時,父組件的 activeName 也會隨之更新,這樣使用者可以很明確的知道數據可能會被修改。

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

總結

使用組件的model選項實現自定義組件雙向綁定,在組件內部通過事件更新屬性值,這樣的自定義組件使用起來更優雅。其實通過model選項的方式去修改父級屬性,我認為有點違反了單向數據流的原則。本來單向數據流是不允許子級修改父級屬性的,只是使用v-model的語法糖,看起來會讓數據流向顯得更加明確,恰好彌補這個缺點。

作者:WahFung 出處:http://www.cnblogs.com/chanwahfung/
站長推薦

1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/7241