codecamp

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()

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

WARNING

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

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

Vue 3.0 动态组件&异步组件
Vue 3.0 处理边界情况
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Vue.js 3.0 风格指南

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }