以下是一个简单的示例：
<template>
<div>
<button @click="handleClick">点击我</button>
<p ref="myParagraph">这是一个段落</p>
</div>
</template>
<script>
const app = Vue.createApp({
methods: {
handleClick() {
// 使用 this.$refs 来访问引用
const paragraph = this.$refs.myParagraph;
paragraph.style.color = 'red';
}
}
});
app.mount('#app');
</script>
在这个例子中，<p> 元素通过 ref="myParagraph" 绑定了一个引用。在 handleClick 方法中，使用 this.$refs.myParagraph 来访问这个引用，然后改变了段落元素的文字颜色。
需要注意的是，使用 ref 并直接访问 DOM 元素是一种直接操作 DOM 的方法。在 Vue 中，更推荐使用数据驱动的方式，即通过数据和绑定来控制视图，而不是直接操作 DOM。只有在一些特殊的情况下，或者在集成第三方库时，使用 ref 直接访问 DOM 可能会更合适。
转载请注明出处：http://www.zyzy.cn/article/detail/499/Vue 3.0