vue2中,如何用ref
在 Vue 2 中,你可以使用 ref
属性来引用 DOM 元素或子组件实例。这是一个基本的示例:
<template>
<div ref="myDiv">Hello World!</div>
<MyComponent ref="myComponent"></MyComponent>
</template>
<script>
export default {
mounted() {
console.log(this.$refs.myDiv); // 访问DOM元素
console.log(this.$refs.myComponent); // 访问子组件实例
}
}
</script>
在模板中,你为想要引用的元素设置 ref
属性。然后在 Vue 实例内部(通常在 mounted
钩子函数中),你可以通过 this.$refs[refName]
访问到对应的引用。如果 ref
是在普通的 DOM 元素上使用,它将指向该 DOM 元素;如果 ref
是在子组件上使用,那么引用指向的就是组件实例。
需要注意的是,避免在模板或计算属性中访问 $refs
,因为 $refs
是非响应式的,它们不会随着数据变化而更新。