请简述Vue ref 的作用是什么？

Vue面试题 5月前 0 115

在Vue中，ref 是一个特殊的属性，我们可以用它来获取到 DOM 元素或者子组件的引用。

获取 DOM 元素的引用：我们可以在模板中的某个元素上添加 ref 属性，然后在 Vue 实例中通过 $refs 对象来访问这个元素。

例如：

<template>
   <div ref="myDiv">Hello Vue!</div>
</template>
<script>
export default {
   mounted() {
       console.log(this.$refs.myDiv); // 输出 DOM 元素
   },
};
</script>

获取子组件的引用：我们也可以在子组件上使用 ref 属性，然后在父组件中通过 $refs 对象来访问这个子组件的实例。

例如：

<template>
   <my-component ref="myComponent"></my-component>
</template>
<script>
export default {
   mounted() {
       console.log(this.$refs.myComponent); // 输出子组件实例
   },
};
</script>

ref 是一个很有用的特性，但我们应该尽量避免过度使用它。因为它让我们的代码变得更加难以理解和维护，尤其是在大型应用中。我们应该优先使用 Vue 的声明式渲染和组件传值，尽量避免直接操作 DOM 或者子组件。

发表评论 取消回复

发表评论取消回复