vue3怎么获取dom元素

百变鹏仔 2个月前 (10-30) #前端问答

文章标签元素

vue 3 中获取 dom 元素的方式有六种：直接访问 $refs、模板引用、自定义指令 v-dom、事件处理程序 @event、vue 事件总线 $emit 和 $on、获取组件 this.$children、this.$el。建议在组件的 mounted 生命周期钩子中获取 dom 元素以确保其可用。

Vue 3 中如何获取 DOM 元素

直接访问

模板引用

自定义指令

立即学习“前端免费学习笔记（深入）”；

事件处理程序

Vue 事件总线

获取组件

注意事项

示例代码

Direct Access：

<template><div ref="myElement"></div></template><script>  export default {    mounted() {      console.log(this.$refs.myElement);    }  }</script>

Template Reference：

<template ref="myElement">...</template>

export default {  mounted() {    console.log(this.$refs.myElement);  }}

Custom Directive：

Vue.directive('v-dom', {  bind(el, binding) {    binding.value(el);  }});

<div v-dom="element =&gt; console.log(element)"></div>

文章推荐

vue3怎么获取dom元素

javascript里怎么输入

网页关闭javascript

javascript怎么实现异步

javascript隐藏的元素显示属性

javascript要全部记住吗