vue 子组件让父组件获取焦点

在Vue中，组件的焦点是通过`$refs`属性来控制的。你可以在子组件中使用`this.$refs`来访问子组件的DOM元素，然后在父组件中使用`$nextTick()`方法来设置焦点。

以下是一个例子：

子组件：

<template>
  <div>
    <input ref="myInput" type="text" />
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      this.$refs.myInput.focus();
    },
  },
};
</script>

父组件：

<template>
  <div>
    <my-component ref="myComponent"></my-component>
    <button @click="focusChildInput">Focus Child Input</button>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent,
  },
  methods: {
    focusChildInput() {
      this.$nextTick(() => {
        this.$refs.myComponent.focusInput();
      });
    },
  },
};
</script>

这里我们在子组件中定义了一个`focusInput()`方法，用于将焦点设置到子组件中的`<input>`元素上。在父组件中，我们使用`$nextTick()`方法来等待DOM更新完成，然后调用子组件的`focusInput()`方法来设置焦点。