组件的二次封装

核心

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

Vue 3

👉 在线体验

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>

Vue 2

<template>
  <div class="vf-input">
    <div>vf-input</div>
    <el-input v-bind="$attrs" v-on="$listeners"></el-input>
  </div>
</template>

<script>
export default {
  name: 'VfInput',
  inheritAttrs: false,
  props: {
    custom1: {
      type: String,
      default: '',
    },
  },
  created() {
    console.log('$props', this.$props)
    console.log('$attrs', this.$attrs)
    console.log('$listeners', this.$listeners)
  },
}
</script>