脚本宝典收集整理的这篇文章主要介绍了Vue 3.0 模板引用，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。

尽管存在 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.$refs.input.focus()
    }
  },
  mounted() {
    this.focusInput()
  }
})

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

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

this.$refs.usernameInput.focusInput()

当 ref 与 v-for 一起使用时，你得到的 ref 将是一个数组，其中包含镜像数据源的子组件。

WARNING

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

参考：在组合式 API 中使用 template refs

脚本宝典总结

以上是脚本宝典为你收集整理的Vue 3.0 模板引用全部内容，希望文章能够帮你解决Vue 3.0 模板引用所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。