UI 组件二次封装之 props 传递与 v-model 实现

最新推荐文章于 2025-06-26 10:27:30 发布

_let

最新推荐文章于 2025-06-26 10:27:30 发布

阅读量7.2k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： vue 前端 elementUI

本文链接：https://blog.youkuaiyun.com/qq_39759115/article/details/91952037

UI 组件二次封装之 props 传递与 v-model 实现

我们知道在组件的二次封装的时候，有三点是必须做到的：原组件的 props 继承、事件传值的回掉函数、v-model 双向绑定。

本文以 elemnetUI 为例，记录原组件的 props 继承以及 v-model 双向绑定相关的解决方案。

一、props 继承

以 el-select 为例，我们知道它的 change 事件只能获取选项的 value，不能获取 label，如果我们要同时获取这两者就比较麻烦，我们可以简单的封装一下：

<template>
  <el-select v-bind="$props" @change="changeEmit" @visible-change='visibleChangeEmit'>
    <el-option
      v-for="item in options"
      :key="item[propsAlias.value]"
      :label="item[propsAlias.label]"
      :value="item[propsAlias.label] + '·' + item[propsAlias.value]">
    </el-option>
  </el-select>
</template>

<script>
import {
   
    Select } from 'element-ui'
export default {
   
   
  name: 'em-select',
  props: {
   
   
    ...Select.props, // 这里继承原 UI 组件的 props
    // 配置
    options: {
   
   
      type: Array,
      default: () => [
        {
   
   
          value: '选项1',
          label: '黄金糕'
        },
        {
   
   
          value: '选项2',
          label: '双皮奶'
        }
      ]