在Vue.js的早期版本中(特別是Vue 1.x版本),v-el
?指令被用來給元素注冊引用信息(即DOM元素的引用)。這樣,開發者就可以在Vue實例的方法中直接訪問到這個DOM元素。然而,需要注意的是,從Vue 2.0開始,v-el
?指令已經被廢棄,并被ref
屬性所取代。
在Vue 1.x中使用v-el
的例子:
<template> <div> <input v-el:myInput type="text" placeholder="edit me"> <button @click="focusInput">Focus the input</button> </div>
</template> <script>
export default { methods: { focusInput: function () { // 使用this.$els.myInput訪問DOM元素 this.$els.myInput.focus(); } }
}
</script>
但在Vue 2.x及更高版本中,應該使用ref
屬性來達到同樣的目的,如下所示:
<template> <div> <input ref="myInput" type="text" placeholder="edit me"> <button @click="focusInput">Focus the input</button> </div>
</template> <script>
export default { methods: { focusInput: function () { // 使用this.$refs.myInput訪問DOM元素 this.$refs.myInput.focus(); } }
}
</script>
ref
被設計為用來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的$refs
對象上。如果在普通的DOM元素上使用,引用指向的就是DOM元素;如果用在子組件上,引用就指向組件實例。這使得在Vue 2.x及更高版本中訪問DOM元素或子組件實例變得更加直接和方便。