Vue3 封装第三方组件(一)做一个合格的传声筒

各种UI库的功能都是非常强大的,尤其对于我这种不会 css 的人来说,就更是帮了大忙了。

只是嘛,如果再封装一下的话,那么用起来就会更方便了。

那么如何封装呢?

封装三要素 —— 属性、插槽、事件、方法

可以封装,但是原生UI库提供的强大功能不能给封装没了吧,吃了回扣可是不好滴。
那么如何做到不遗漏呢?先做一个合格的传声筒。

传递属性

先看看 el-input 提供的属性:

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#slots )却是 使用 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的方法
<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 里面才能得到值,我们看看打印结果:(太长只能截取一部分)

ref

很长吧。

父组件里面怎么用方法

<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 里面。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容