vue基于element-plus的組件二次封裝怎么實現

本文小編為大家詳細介紹“vue基于element-plus的組件二次封裝怎么實現”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue基于element-plus的組件二次封裝怎么實現”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

基于element-plus的二次封裝數據雙向綁定

在實際開發中，經常需要基于element-plus封裝一些自己的定制化組件，方便快速構建我們當前的業務。在vue2.0中父子組件數據的雙向綁定通常都是通過在props中傳值:value.sync，在子組件中使用，this.$emit(“update:value”, value)的方式，那么我們怎樣在vue3中實現類似的父子組件的雙向綁定呢？

在vue2中，數據的響應式是基于Object.defineProperty對象進行數據的雙向綁定，這種劫持+發布訂閱的模式并不能很好的檢測對象、數組等復雜類型的數據。在vue3的數據的響應式是基于proxy的set、get方法，相對于Object.defineProperty的劫持，proxy代理的方式更為優雅。

具體實現思路如下：

表單的label和對應的選擇器、輸入框

效果預覽

el-input子組件的封裝 baseInput.vue

<template>
  <div class="base-input flex align-center">
    <div v-if="props.blockName">{{ props.blockName }}</div>
    <el-input placeholder="請輸入" v-model="chanValue"></el-input>
  </div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
  blockName: {
    type: String,
    default: ''
  },
  value: {
    type: String,
    default: ''
  }
})
const emits = defineEmits(['update:value'])
// 通過重寫計算屬性的set和get方法，將計算屬性的結果綁定在輸入框的model中
const chanValue = computed({
  get: () => props.value,
  set: (val) => {
    emits('update:value', val)
  }
})
</script>

el-select子組件的封裝 baseSelect.vue

<template>
  <div class="base-select flex align-center">
    <div>{{ props.blockName }}</div>
    <el-select 
      v-model="chanValue" 
      :multiple="props.multiple" 
      :filterable="props.filterable" 
      :allow-create="props.allowCreate"
      :placeholder="placeholder" 
     >
      <el-option v-for="item in props.options" :key="item.value" :value="item.value" :label="item.label" />
    </el-select>
  </div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
  blockName: {
    type: String,
    default: ''
  },
  value: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: '請選擇'
  },
  options: {
    type: Array,
    default() {
      return [{ value: '', label: '' }]
    }
  },
  // 一下三個屬性配合多選使用
  multiple: {
    type: Boolean,
    default: false
  },
  filterable: {
    type: Boolean,
    default: false
  },
  allowCreate: {
    type: Boolean,
    default: false
  }
})
const chanValue = computed({
  get: () => props.value,
  set: (val) => {
    emits('update:value', val)
  }
})
const emits = defineEmits(['update:value'])
</script>

其他組件的調用

<BaseInput blockName="傳入的label名稱" v-model:value="雙向綁定的數據" />
<BaseSelect blockName="傳入的label名稱" :options="選擇器的選項值" v-model:value="雙向綁定的數據" />

說明

利用computed的set，get方法，你可以進行父子組件的雙向綁定，再也不用擔心，子組件無法修改父組件的props而煩惱，其他的element的組件，大致實現思路都是如此。

基礎的dialog彈框

el-dialog子組件的封裝 baseDialog.vue

<template>
  <div>
    <el-dialog v-model="getShow" width="65%" :before-close="handlerCancer">
      <div>{{props.title}}</div>
      <slot/>
      <template #footer>
        <span>
          <button @click="handlerCancer">取消</button>
          <button @click="handlerSubmit">確定</button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
  title: {
   type: String,
   default:''
  },
  isShow: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['update:isShow'])
const handlerCancer = () => {
  emits('update:isShow', false)
}
const handlerSubmit = () => {
  // dialog 點擊確定按鈕之前處理相關業務邏輯
  emits('update:isShow', false)
}
const getShow = computed({
  get: () => props.isShow,
  set: (val) => {
    emits('update:isShow', val)
  }
})
</script>

其他組件的調用

<BaseDialog title="傳入的標題名稱" v-model:isShow="isShow">
   <div>對應的插槽內容</div>
</BaseDialog>

注意事項

v-model雙向綁定默認的props名稱為value，像dialog這種綁定的是isShow，需要在v-model后面聲明雙向綁定的props參數名稱v-model:isShow，像input，select這種輸入框綁定默認為value，所以可以忽略不寫。若你綁定其他值（即除了value以外的其他參數值），則需要v-model:isShow聲明

讀到這里，這篇“vue基于element-plus的組件二次封裝怎么實現”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。