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

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

 获取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);