模板引用

尽管存在prop和事件，但有时你可能仍然需要直接访问JavaScript中的子组件。为此，可以使用ref attribute为子组件或HTML元素指定引用ID：

<input ref="input" />

如果你希望在组件挂载时，以编程的方式focus到这个input上，这可能有用。

const app = Vue.createApp({})

app.component('base-input', {
  template: `
    <input ref="input" />
  `,
  methods: {
    focusInput() {
      this.$ref.input.focus()
    }
  },
  mounted() {
    this.focusInput()
  }
})

此外，还可以向组件本身添加另一个ref，并使用它从父组件触发focusInput事件：

<base-input ref="usernameInput"></base-input>

this.$refs.usernameInput.focusInput()

$refs只会在组件渲染完成之后生效。这仅作为一个用于直接操作子元素的“逃生舱”，应该避免在模板或计算属性中访问$refs。