W3Cschool
恭喜您成為首批注冊(cè)用戶(hù)
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
該頁(yè)面假設(shè)你已經(jīng)閱讀過(guò)了組件基礎(chǔ)。如果你還對(duì)組件不太了解,推薦你先閱讀它。
盡管存在 prop 和事件,但有時(shí)你可能仍然需要直接訪(fǎng)問(wèn) JavaScript 中的子組件。為此,可以使用 ref
attribute 為子組件或 HTML 元素指定引用 ID。例如:
<input ref="input" />
例如,你希望以編程的方式 focus 這個(gè) input 在組件上掛載,這可能有用
const app = Vue.createApp({})
app.component('base-input', {
template: `
<input ref="input" />
`,
methods: {
focusInput() {
this.$refs.input.focus()
}
},
mounted() {
this.focusInput()
}
})
此外,還可以向組件本身添加另一個(gè) ref
,并使用它從父組件觸發(fā) focusInput
事件:
<base-input ref="usernameInput"></base-input>
this.$refs.usernameInput.focusInput()
當(dāng) ref
與 v-for
一起使用時(shí),你得到的 ref
將是一個(gè)數(shù)組,其中包含鏡像數(shù)據(jù)源的子組件。
WARNING
$refs
只會(huì)在組件渲染完成之后生效。這僅作為一個(gè)用于直接操作子元素的“逃生艙”——你應(yīng)該避免在模板或計(jì)算屬性中訪(fǎng)問(wèn) $refs
。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話(huà):173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: