Vue3 通过 ref 获取DOM节点和通过组件实例化返回根DOM节点

最新推荐文章于 2025-03-19 09:43:31 发布

@穷且益坚，不坠青云之志

最新推荐文章于 2025-03-19 09:43:31 发布

阅读量2.2k

点赞数 1

分类专栏： Vue 文章标签：大数据

本文链接：https://blog.youkuaiyun.com/tengyuxin/article/details/125540203

版权

Vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了Vue3中模板引用的两种方式，包括在组件选项和组合式API中的使用，并通过案例展示了如何在组合式API中获取并操作DOM节点。同时，详细阐述了如何通过Vue3的createApp实例化组件，并通过实例的$el属性获取根DOM节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、模板引用，的两种写法

获取DOM节点，属于vue 模板引用的知识点，

1. 在组件选项的文件中，模板引用方式

2. 在组合式API中模板引用发过誓

下面的案例是在组合式API文件中使用的方式

<template>
  <div ref="wuzi">
    <h1>物资仓库</h1>
  </div>
</template>

<script setup>
import { ref, onMounted} from "vue";
// 模板中ref的名称，必须和变量名相同，且ref函数包裹null，必须return出去
const wuzi = ref(null);

onMounted(() => {
      //打印DOM节点
      console.log(wuzi.value);
 })

</script>

二、通过实例化组件返回根DOM节点

1. 组件实例化

目前Vue3组件的实例化，只能通过createApp 返回引用实例

    //定义具有组件选项的对象
    const Profile = {
        template: `<p class="demo">{{firstName}}</p>`,
        data() {
            return {
                firstName: '滕禹鑫的组件',
            }
        }
    }

    // 为Vue实例化，提供挂载的元素节点
    let divEle = document.createElement("div");

    //实例化 和 挂载，返回结果就是Vue实例
    let a = Vue.createApp(Profile).mount(divEle);

2. 通过实例属性 $el ，得到该Vue实例的根DOM节点元素

 //定义组件
    const Profile = {
        template: `<p class="demo">{{firstName}}</p>`,
        data() {
            return {
                firstName: '滕禹鑫的组件',
            }
        }
    }
    // Vue组件实例化
    let divEle = document.createElement("div");
    let a = Vue.createApp(Profile).mount(divEle);

    //打印该实例的DOM节点
    let dom = a.$el;
    console.log(dom);