各種UI庫的功能都是非常強大的，尤其對于我這種不會 css 的人來說，就更是幫了大忙了。

只是嘛，如果再封裝一下的話，那么用起來就會更方便了。

那么如何封裝呢？

封裝三要素 —— 屬性、插槽、事件、方法

可以封裝，但是原生UI庫提供的強大功能不能給封裝沒了吧，吃了回扣可是不好滴。
那么如何做到不遺漏呢？先做一個合格的傳聲筒。

傳遞屬性

先看看 el-input 提供的屬性：

太長了，這里只截了一半。
這么多的屬性，如果一個一個都弄到 props 里面，然后再一個一個綁定上去，這就太麻煩了。

我們可以分成兩部分，重要的屬性做到 props 里面，其他的可以放到 $attrs 里面。

定義一個簡單的組件

模板

<template>
  <div>
    <el-input
      v-model="value" // 不能直接幫的屬性
      v-bind="$attrs"  // 綁定其他屬性。
    >
    </el-input> 
  </div>
</template>

代碼

export default {
  name: 'test-text',
  inheritAttrs: false,
  props: {
    modelValue: [String, Number]
  },
  setup(props, ctx) {
    const value = debounceRef(props, ctx.emit)

    return {
      value
    }
  }
}

父組件的調用代碼：
模板

<inputtext
    v-model="value"
    v-bind="attrs"
  >
  </inputtext>

代碼

const value = ref('222')

const attrs = reactive({
  maxlength: 10,
  'show-word-limit': true,
  clearable: true
})

這里 modelValue 就是 props ，maxlength、show-word-limit、clearable 就變成了 $attrs 。

然后要看 el-input 是否是根元素，如果是跟元素的話，那么會自動綁定上，不需要我們手動寫 v-bind="$attrs"。

如果像上面的例子不是根元素的話，需要手動寫 v-bind="$attrs"。

inheritAttrs

這個是指定組件是否自動綁定 $attrs 。
默認是 true，會自動把 $attrs 綁定到根元素上面，不管根元素是啥。
這里設置為 false，那么$attrs 就不會自動綁定到 div 上面了。

插槽

這個稍微復雜一點，插槽本來就有一點繞，官網的介紹又比較含混。

我們可以找到 $slots 這個東東，但是官網的介紹（https://www.vue3js.cn/docs/zh/api/instance-properties.html ）卻是 使用 h，這個就……

不過想要傳遞插槽，還是需要這個。

我們先看看 el-input 的插槽的使用。

  <el-input
    placeholder="請輸入內容"
    v-model="input3"
    class="input-with-select"
  >
    <template #prepend>
      <el-select v-model="select" placeholder="請選擇">
        <el-option label="餐廳名" value="1"></el-option>
        <el-option label="訂單號" value="2"></el-option>
        <el-option label="用戶電話" value="3"></el-option>
      </el-select>
    </template>
    <template #append>
      <el-button icon="el-icon-search"></el-button>
    </template>
  </el-input>

那么想要傳遞插槽的話，是不是可以這樣？

   <!--傳遞插槽-->
    <template  v-slot:prepend> // 給遞給el-input 的插槽
      <slot name="prepend"></slot> // 接收父組件傳遞進來的插槽
    </template> 

測試可以。

那么總不會一個一個寫吧，這也太麻煩了。如果能夠for就好了。

等等， for？那么我們是不是可以這樣。

  <!--傳遞插槽-->
  <template 
    v-for="(item, key, index) in $slots"
      :key="index"
      v-slot:[key]
  >
      <slot :name="key"></slot>
  </template>  

測試可以。

完整代碼

    <el-input
      ref="refInput"
      v-model="value"
      v-bind="$attrs"
    >
      <!--傳遞插槽-->
      <template 
        v-for="(item, key, index) in $slots"
        :key="index"
        v-slot:[key]
      >
        <slot :name="key"></slot>
      </template> 
    </el-input> 

傳遞事件

這個就簡單了，啥都不用做，自動就傳遞出去了。el-input 是否是跟元素都可以。
測試一下：

 <inputtext
    ref="refInput"
    v-model="value"
    v-bind="props"
    @clear="clear"
    @my-change="myChange"
  >

clear 是 el-input 提供的事件，外部可以直接得到這個事件，組件內部不用做操作。
my-change 是自定義的事件。

方法

一直都忽略了，還有方法這個事，因為基本沒用過。

使用方法嘛，就需要使用 ref，這個此 ref 非彼 ref，說不清了，還是寫代碼吧。

直接使用的方法

直接使用UI庫組件的方法，比如 el-input 的 提供的 select：

<el-input
  ref="refInput" // 注意這里的 ref 
  v-model="value"
  v-bind="$attrs" >
</el-input> 

ref 的寫法，不要加冒號。

const refInput = ref(null) // 先放一個null
onMounted(() => { // 然后在 onMounted 里面才能得到值。
  console.log('refinput', refInput) // 看看啥樣。
  refInput.value.select() // 調用方法，文本框的內容會被選中
})

先定義一個 ref，然后交給模板里的 ref，好像有點繞，這里必須使用 ref，reactive是不行滴。

在渲染后才能生效，也就是說必須在 onMounted 里面才能得到值，我們看看打印結果：（太長只能截取一部分）

很長吧。

父組件里面怎么用方法

<inputtext
    ref="refInput"
    v-model="value">
</el-input> 

// 測試方法
const refInput = ref(null)

onMounted(() => {
  console.log('refinput', refInput)
  // refInput.value.$refs.refInput.select()
  refInput.value.refInput.select()
})

父組件里面的用法是一樣的，只是需要再套一層，才能拿到自定義組件內部的UI庫組件。

看看結構：

太長了，還在下面。

這個就比較近了。

話說為啥弄得這么多屬性和方法事件呀？

父組件調用子組件內部的方法

上面那種方式，還可以讓父組件調用子組件內部定義的方法，比如內部定義一個

   const setInput = () => {
      value.value = new Date()
    }

父組件可以這樣調用

refInput.value.setInput()

總結

其實事件和方法，并沒有封裝，而是直接就可以使用的。
這是 element-plus 測試的結果，其他UI庫沒有測試。

插槽需要寫一個 v-for 就可以實現傳遞，而且是通用的代碼。
屬性 就需要規劃一下了，看設計要求，哪些放在 props里面，哪些放在attrs 里面。

總結

以上是生活随笔為你收集整理的Vue3 封装第三方组件（一）做一个合格的传声筒的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。