vue-component-expand-demo

Overview

对vue组件的二次封装应该每个人都有做过，在对组件二次封装的时候一定会遇到对属性绑定、插槽、被封装的组件暴露方法调用的处理。比如封装 ElementPlus 的 el-table 组件等。该插件就是为了应对这种情况而开发出来的，减少冗余代码。

Install

npm install vue-component-expand

Props

interface DynamicComponentProps {
  is: string | Component
}

要渲染的实际组件由 is prop 决定。 当 is 是字符串，它既可以是 HTML 标签名也可以是组件的注册名。 或者，is 也可以直接绑定到组件的定义。

Example

import { createApp } from 'vue'
import VueComponentExpand from 'vue-component-expand'

const app = createApp({})
app.use(VueComponentExpand)

以封装 ElementPlus 的 el-input 组件为例

// 直接封装
<template>
  <VueComponentExpand is="el-input"></VueComponentExpand>
</template>
// 组件外有节点包裹的情况需要绑定 $attrs 主要是处理 v-model 无效的问题
<template>
  <div>
    <VueComponentExpand is="el-input" v-bind="$attrs"></VueComponentExpand>
  </div>
</template>