一、模板引用,的两种写法
获取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);