vue 封装组件时，优雅的将子组件属性和方法对父组件暴露

对 el-input 进行封装，封装为 my-input

<template>
  <!-- 使用 $attrs 传入已在父组件中声明但在子组件中未被声明的 props，从而达到当父组件传入的 prop 时，父组件能直接使用子组件的原生属性 -->
  <!-- 使用 $listeners 传入已在父组件中注册但在子组件中未注册的事件，将父组件中出发的事件直接传递给子组件，从而达到父组件中传入的事件直接在子组件的原生事件中触发 -->
  <el-input
    v-model="value"
    v-bind="$attrs"
    v-on="$listeners">
    <!-- 遍历子组件非作用域插槽，并对父组件暴露 -->
    <template v-for="(index, name) in $slots" v-slot:[name]>
      <slot :name="name" />
    </template>
    <!-- 遍历子组件作用域插槽，并对父组件暴露 -->
    <template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
      <slot :name="name" v-bind="data"></slot>
    </template>
  </el-input>
</template>

<script>
  export default {
    name: 'MyInput',
    inheritAttrs: false,  // 避免将未声明的 props 在 DOM 节点上注册
    data() {
      return {
        value:''
      }
    },
    props: {
      type: {
        default: 'a',
        // 使用 validator 抛出参数异常，如果返回为 false 则异常
        validator: prop => ['a','b','c'].includes(prop)
      }
    },
    created() {

    },
    methods: {
      myFunc() {
        console.log('myFunc')
      }
    }
  }
</script>

<style scoped>

</style>

在实际场景中使用 my-input

<template>
  <my-input $ref="myInput" clearable @clear="handleClear"/>
</template>

<script>
  import MyInput from './my-input'
  export default {
    name: 'test',
    components: { MyInput },
    data() {
      return {

      }
    },
    created() {

    },
    mounted() {
      // 使用 $ref 调用内部方法
      this.$refs.myInput.myFunc()
    },
    methods: {
      handleClear() {
        console.log('clear')
      }
    }
  }
</script>

<style scoped>

</style>