组件的二次封装

示例

👉 在线体验

App.vue

<script setup lang="ts">
import { ref } from 'vue'
import MyInput from './MyInput.vue'

const value = ref('')
</script>

<template>
  <div>{{ value }}</div>
  <MyInput v-model="value">
    <template #prefix>prefix</template>
    <template #suffix>suffix</template>
    <template #prepend>prepend</template>
    <template #append>append</template>
  </MyInput>
</template>

MyInput.vue

<script setup lang="ts">
defineOptions({
  inheritAttrs: false,
})
</script>

<template>
  <el-input v-bind="$attrs">
    <template v-for="(_, name) in $slots" #[name]>
      <slot :name="name"></slot>
    </template>
  </el-input>
</template>

总结：

1. 善于使用属性透传（attrs）
2. 善用插槽（slots）