组件的二次封装

74 阅读1分钟
组件
<template>
  <el-input ref="inp" v-bind="$attrs" v-on="$listeners">
    <template v-for="(index, name) in $slots" :slot="name">
      <slot :name="name" />
    </template>
  </el-input>
</template>
<script>
export default {
  //这个对于父级的$refs的实例,但是我一些这个就卡死,所以我不知道到底行不行
  mounted() {
    const entries = Object.entries(this.$refs.inp)

    for (const [key, value] of entries) {
      this[key] = value
    }
  }
}
</script>
//调用的地方
 <myInput ref="ddd" v-model="ddd">
      <el-select v-model="select" slot="prepend" placeholder="请选择" style="width: 100px">
        <el-option label="餐厅名" value="1"></el-option>
        <el-option label="订单号" value="2"></el-option>
        <el-option label="用户电话" value="3"></el-option>
      </el-select>
      <template slot="append">.com</template>
    </myInput>
 //所以这个地方的this.$refs.ddd不知道行不行啊。我都卡死了。
 //所以我还是将就下用this.$refs.ddd.$refs.inp 这样来用吧