父組件的代碼如下：

<template>
  <el-button type="primary" @click="focus">聚焦</el-button>
  <MyInput v-model="msg" ref="myInputRef"></MyInput>
</template>
<script setup lang="ts">
import MyInput from './MyInput.vue'
import { ref } from 'vue'
const myInputRef = ref()

const msg = ref('111')
//點擊聚集也同時可以聚焦到子組件的input框
const focus = () => {
  console.log(MyInput)
  myInputRef.value.focus()
}
</script>

子組件MyInput 的代碼如下：

<template>
  <div>
    hello World
  </div>
  <el-input ref="inputRef" v-bind="$attrs"></el-input>
</template>

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

const inputRef = ref()
</script>

<style scoped>

</style>

如何讓子組件的input中ref的方法暴露出來呢
使用defineExpose的方法暴露子組件的方法
父組件代碼如下：

<template>
  <el-button type="primary" @click="focus">聚焦{{ msg }}</el-button>
  <MyInput v-model="msg" ref="myInputRef">
    <template #prepend>
      <el-button>前置</el-button>
    </template>
    <template #append>
      <el-button>后置</el-button>
    </template>
  </MyInput>
</template>
<script setup lang="ts">
import MyInput from './MyInput.vue'
import { ref } from 'vue'
const myInputRef = ref()

const msg = ref('111')
//點擊聚集也同時可以聚焦到子組件的input框
const focus = () => {
  console.log(MyInput)
  myInputRef.value.focus()
}
</script>

子組件代碼如下：

<template>
  <div>
    hello World
  </div>
  <el-input ref="inputRef" v-bind="$attrs">
    <!-- 插槽  slotProps:插槽的作用域值-->
    <template v-for="(_,slot) in $slots" :key="slot" #[slot]="slotProps">
     <slot :name="slot" :v-bind="slotProps"></slot>
    </template>
  </el-input>
</template>

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

const inputRef = ref()

//采用代理的方法把子組件所有的方法暴露出去
defineExpose(
  new Proxy({}, {
    get(target, key) {
      return inputRef.value?.[key]
    },
    has(target, key) {
      return key in inputRef.value
    }
  })
)

</script>

<style scoped>

</style>