在 vue 3 中，通过 ref 属性获取 dom 元素或组件实例：添加 ref 属性，指定唯一名称。在组件中使用 useref() 钩子创建引用，与 ref 属性绑定。通过 ref 属性访问 dom 元素或组件实例，获取其值。
Vue 3 中如何获取 DOM
在 Vue 3 中，可以通过 ref 属性来获取 DOM 元素或组件实例。
步骤：
-
向模板添加
ref属性： 为需要获取的 DOM 元素或组件添加ref属性，并指定一个唯一的名称。 -
在组件中使用
ref： 在组件的setup()方法中，使用useRef()钩子创建引用，并将其与ref属性绑定的名称关联。
示例：
获取一个按钮元素：
<code class="html"><template><button ref="submitButton">提交</button>
</template><script>
import { useRef } from 'vue';
export default {
setup() {
const submitButtonRef = useRef();
// 访问 DOM 元素
// ...
return {
submitButtonRef,
};
},
};
</script></code>
获取一个组件实例：
<code class="html"><template><customcomponent ref="customComponent"></customcomponent></template><script>
import { useRef } from 'vue';
import CustomComponent from './CustomComponent.vue';
export default {
setup() {
const customComponentRef = useRef();
// 访问组件实例
// ...
return {
customComponentRef,
};
},
};
</script></code>
访问 DOM 元素或组件实例
一旦创建了引用，就可以通过 ref 属性访问 DOM 元素或组件实例：
<code class="javascript">// 获取按钮元素 const submitButtonEl = this.submitButtonRef.value; // 获取组件实例 const customComponentInstance = this.customComponentRef.value;</code>
在上述示例中，submitButtonEl 引用了按钮元素，customComponentInstance 引用了 CustomComponent 组件的实例。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
