封裝el-dialog為一個(gè)組件

我們?cè)谑褂?code>element-ui的時(shí)候，如果一個(gè)彈窗中的內(nèi)容很多统刮，那么我們經(jīng)常會(huì)把這個(gè)彈窗封裝成一個(gè)組件，如下：

<!-- DetailDialog.vue html -->
<template>
  <el-dialog title="標(biāo)題" :visible.sync="visible" width="720px" >
    <p>彈窗內(nèi)容</p>
  </el-dialog>
</template>

// DetailDialog.vue js
<script>
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  }
</script>

el-dialog會(huì)修改 props辉哥，并報(bào)錯(cuò)

但是這樣會(huì)有一個(gè)問(wèn)題，當(dāng)觸發(fā)了el-dialog內(nèi)部的關(guān)閉事件時(shí)恒水， 比如點(diǎn)擊彈窗陰影等钉凌， 它會(huì)emit事件來(lái)修改當(dāng)前組件的props [visible]御雕，由于組件不能直接修改prop屬性，然后就會(huì)報(bào)錯(cuò)。

我們新增了一個(gè)中間變量innerVisible，來(lái)攔截props [visible]的修改和獲取

<!-- DetailDialog.vue html -->
<template>
  <el-dialog title="標(biāo)題" :visible.sync="innerVisible" width="720px" >
    <p>彈窗內(nèi)容</p>
  </el-dialog>
</template>

// DetailDialog.vue js
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    innerVisible: {
      get: function() {
        return this.visible
      },
      set: function(val) {
        this.$emit('update:visible', val)
      }
    }
  }
}
</script>

這樣在el-dialog內(nèi)部修改prop[visible]的時(shí)候，我們會(huì)通過(guò)emit('update:')的方式來(lái)通知父組件汁蝶，避免直接修改props。當(dāng)然父組件需要加上sync修飾符來(lái)接受修改：

<!-- father.vue html -->
<DetailDialog :visible.sync="detailVisible" />

到此為止玖像，封裝的彈窗組件已經(jīng)沒(méi)有問(wèn)題了笤昨。

繼續(xù)優(yōu)化崇裁，使用v-model控制顯示隱藏

// DetailDialog.vue js
<script>
export default {
  model: {
    prop: 'visible',  // 修改 v-model 綁定的props名稱
    event: 'toggle'  // 修改 v-model 綁定的自定義事件名
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    innerVisible: {
      get: function() {
        return this.visible
      },
      set: function(val) {
        this.$emit('update:toggle', val)
      }
    }
  }
}
</script>

接入了v-model巴比，使用起來(lái)就更高大上而且整潔了

<!-- father.vue html -->
<DetailDialog v-model="detailVisible" />

繼續(xù)優(yōu)化采记，封裝成mixins

當(dāng)頻繁封裝彈窗組件時(shí)然走，那么上述邏輯也需要不停地復(fù)制芍瑞，所以繼續(xù)優(yōu)化妥凳，把上述控制顯示隱藏的邏輯封裝成了mxins屑那，直接復(fù)用即可

// vModelDialog.js
export default {
  model: {
    prop: 'visible',
    event: 'toggle'
  },
  props: {
    visible: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  computed: {
    innerVisible: {
      get: function() {
        return this.visible
      },
      set: function(val) {
        this.$emit('toggle', val)
      }
    }
  }
}

那么封裝彈窗插件時(shí)年碘，只需引入mixins即可完成顯示隱藏邏輯澈歉。

// DetailDialog.vue js
<script>
import vModelDialog from './vModelDialog.js'
export default {
  mixins: [vModelDialog],
}
</script>