實例詳解vue基於element-plus的組件二次封裝

本篇文章為大家帶來了關於vue的相關知識，其中主要介紹了關於vue3基於element-plus的組件二次封裝資料雙向綁定的相關內容，在實際開發中，經常需要基於element-plus封裝一些自己的客製化元件，方便快速建立我們目前的業務，下面一起來看一下，希望對大家有幫助。

【相關推薦：javascript影片教學、vue.js教學】

基於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>
    <div>{{ props.blockName }}</div>
    <el-input></el-input>
  </div>
</template>
<script>
import { computed } from &#39;vue&#39;
const props = defineProps({
  blockName: {
    type: String,
    default: &#39;&#39;
  },
  value: {
    type: String,
    default: &#39;&#39;
  }
})
const emits = defineEmits([&#39;update:value&#39;])
// 通过重写计算属性的set和get方法，将计算属性的结果绑定在输入框的model中
const chanValue = computed({
  get: () => props.value,
  set: (val) => {
    emits(&#39;update:value&#39;, val)
  }
})
</script>

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

<template>
  <div>
    <div>{{ props.blockName }}</div>
    <el-select>
      <el-option></el-option>
    </el-select>
  </div>
</template>
<script>
import { computed } from &#39;vue&#39;
const props = defineProps({
  blockName: {
    type: String,
    default: &#39;&#39;
  },
  value: {
    type: String,
    default: &#39;&#39;
  },
  placeholder: {
    type: String,
    default: &#39;请选择&#39;
  },
  options: {
    type: Array,
    default() {
      return [{ value: &#39;&#39;, label: &#39;&#39; }]
    }
  },
  // 一下三个属性配合多选使用
  multiple: {
    type: Boolean,
    default: false
  },
  filterable: {
    type: Boolean,
    default: false
  },
  allowCreate: {
    type: Boolean,
    default: false
  }
})
const chanValue = computed({
  get: () => props.value,
  set: (val) => {
    emits(&#39;update:value&#39;, val)
  }
})
const emits = defineEmits([&#39;update:value&#39;])
</script>

其他元件的呼叫

<baseinput></baseinput>
<baseselect></baseselect>

#說明

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

基礎的dialog彈框

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

<template>
  <div>
    <el-dialog>
      <div>{{props.title}}</div>
      <slot></slot>
      <template>
        <span>
          <button>取消</button>
          <button>确定</button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { computed } from &#39;vue&#39;
const props = defineProps({
  title: {
   type: String,
   default:&#39;&#39;
  },
  isShow: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits([&#39;update:isShow&#39;])
const handlerCancer = () => {
  emits(&#39;update:isShow&#39;, false)
}
const handlerSubmit = () => {
  // dialog 点击确定按钮之前处理相关业务逻辑
  emits(&#39;update:isShow&#39;, false)
}
const getShow = computed({
  get: () => props.isShow,
  set: (val) => {
    emits(&#39;update:isShow&#39;, val)
  }
})
</script>

其他元件的呼叫

<basedialog>
   <div>对应的插槽内容</div>
</basedialog>

注意事項

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

【相關推薦：

javascript影片教學、vue. js教程】

以上是實例詳解vue基於element-plus的組件二次封裝的詳細內容。更多資訊請關注PHP中文網其他相關文章！