创新互联VUE3教程：Vue3.0模板引用

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

创新互联建站专注于尖山网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供尖山营销型网站建设，尖山网站制作、尖山网页设计、尖山网站官网定制、微信小程序开发服务，打造尖山网络公司原创品牌,更为您提供尖山网站排名全网营销落地服务。

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

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

const app = Vue.createApp({})


app.component('base-input', {
  template: `
    
  `,
  methods: {
    focusInput() {
      this.$refs.input.focus()
    }
  },
  mounted() {
    this.focusInput()
  }
})

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

this.$refs.usernameInput.focusInput()

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

WARNING

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

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

新闻名称：创新互联VUE3教程：Vue3.0模板引用
网页网址：http://www.stwzsj.com/qtweb/news6/1406.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联