使用 Vue 3 的 ＜script setup＞ 语法封装 Element Plus 二次封装组件

在 Vue 3 中，<script setup> 提供了一种简洁的方式来定义组件。结合 Element Plus 库，我们可以轻松地二次封装组件，提升代码的复用性和可维护性。本文将演示如何使用 <script setup> 语法封装一个自定义的 Element Plus Input 组件。

1. 前提条件

• 确保你的项目已经安装了 Vue 3 和 Element Plus。
• 已有基本的 Vue 3 和 Element Plus 的使用经验。

2. 创建自定义的 Input 组件

我们将基于 Element Plus 的 ElInput 组件进行二次封装。下面是完整的代码示例：

<template>
  <el-input
    v-bind="inputAttrs"
    v-model="internalValue"
    :placeholder="placeholder"
    :clearable="clearable"
    :prefix-icon="prefixIcon"
    :suffix-icon="suffixIcon"
    @input="emitInput"
  >
  </el-input>
</template>

<script setup>
import { ref, watch, defineProps, defineEmits } from 'vue';
import { ElInput } from 'element-plus';

// 接收父组件传递的属性
const props = defineProps({
  modelValue: {
    type: String,
    required: true,
  },
  placeholder: {
    type: String,
    default: '请输入内容',
  },
  clearable: {
    type: Boolean,
    default: false,
  },
  prefixIcon: {
    type: String,
    default: '',
  },
  suffixIcon: {
    type: String,
    default: '',
  },
});

// 定义用于发射事件的 emit
const emit = defineEmits(['update:modelValue']);

// 内部的响应式值
const internalValue = ref(props.modelValue);

// 监听外部值的变化并同步到内部
watch(
  () => props.modelValue,
  (newValue) => {
    internalValue.value = newValue;
  }
);

// 监听内部值的变化并发射事件
watch(
  () => internalValue.value,
  (newValue) => {
    emit('update:modelValue', newValue);
  }
);

// 发射输入事件
const emitInput = (value) => {
  emit('update:modelValue', value);
};

// 提取其他传递给 input 的属性
const inputAttrs = {
  placeholder: props.placeholder,
  clearable: props.clearable,
  prefixIcon: props.prefixIcon,
  suffixIcon: props.suffixIcon,
};

</script>

代码说明：

1. 模板部分：

   • 使用 Element Plus 的 el-input 组件。
   • 绑定所有必要的属性和事件。
   • v-bind="inputAttrs" 动态地传递所有的非特定属性。

2. 脚本部分：

   • defineProps：用于定义父组件传递给子组件的属性。这里包括了 modelValue、placeholder、clearable、prefixIcon 和 suffixIcon。
   • defineEmits：定义组件发射的事件，这里主要是 update:modelValue，用于双向绑定。
   • ref 和 watch：管理内部的响应式值 internalValue，并监听外部和内部值的变化。
   • emitInput：处理输入事件并发射更新事件。
   • inputAttrs：集中管理传递给 el-input 的属性，方便扩展和维护。

3. 在父组件中使用自定义的 Input 组件

我们可以在父组件中使用这个自定义的 Input 组件：

<template>
  <CustomInput
    v-model="inputValue"
    placeholder="请输入用户名"
    clearable
    prefix-icon="el-icon-user"
  />
  <p>当前输入的值：{{ inputValue }}</p>
</template>

<script setup>
import { ref } from 'vue';
import CustomInput from './CustomInput.vue';

const inputValue = ref('');
</script>

代码说明：

1. 使用 v-model 绑定：自定义的 CustomInput 组件支持 v-model，可以双向绑定父组件的数据。
2. 传递其他属性：例如 placeholder、clearable 和 prefix-icon。

4. 总结

使用 Vue 3 的 <script setup> 语法，我们可以更简洁地封装组件，提高代码的复用性和可维护性。通过这个自定义的 Element Plus Input 组件的示例，你可以学习到如何高效地封装和管理组件逻辑。

希望这篇文章对你理解和使用 Vue 3 的 <script setup> 语法封装组件有所帮助！如果有任何问题，欢迎随时提问。

这是我使用另一种方法二次封装的组可以参考: