Vue 访问子组件实例 访问子html标签

梗概:

1. 在调用子组件的时候, 添加属性: ref="自定义名字"
2. 通过$refs.自定义名字就可以访问子组件实例

注意:

1. $refs 只会在组件渲染完成之后生效。
   1. 应该避免在渲染过程中访问$refs (如模板或计算属性中)

实例:

const app = Vue.createApp({})
app.component('base-input', {
  template: `
    <input ref="input" />
  `,//同理, 可以换成子组件
  methods: {
    focusInput() {
      this.$refs.input.focus()
    }
  },
  mounted() {
    this.focusInput()
  }
})