首先，我们先写一个组件，用来展示下拉框内容。组件名称起为 ：Select.vue
<template> <div class="select-wrap"> <span>福利商城</span> <span>Saas平台</span> <span>活动定制</span> </div> </template>
我们要将这个组件渲染在网页上，操作应该是这样的：
当鼠标移动到产品服务时，将下拉框组件作为一个组件实例渲染在页面的合适位置。
vue3中，渲染一个Vonde，核心逻辑如下：
import { createVNode, h, render, VNode } from 'vue'
import component from "./component.vue"
//1、创造包裹虚拟节点的div元素
const container = document.createElement('div');
//2、创造虚拟节点
vm = createVNode(component)
//3、将虚拟节点创造成真实DOM
render (vm, container)
//4、将渲染的结果放到body下
document.body.appendChild(container.firstElementChild)要知道组件渲染的位置，我们必须知道父组件（也就是产品服务的dom位置），我们通过ref来获取父组件的dom信息。
// App.vue
<div ref="select">
<span class="name">产品服务</span>
</div>
<script setup >
import { ref } from "vue"
const select = ref()
</script>当鼠标移到产品服务元素上时，渲染下拉框，我们添加个函数
// App.vue
<div ref="select">
<span class="name">产品服务</span>
</div>
<script setup >
import { ref } from "vue"
import Select from "./Select.vue"
const select = ref()
function createDom(){
//1、创造包裹虚拟节点的div元素
const container = document.createElement('div');
//2、创造虚拟节点
let vm = createVNode(Select)
//3、将虚拟节点创造成真实DOM
render (vm, container)
//4、将渲染的结果放到body下
document.body.appendChild(container.firstElementChild)
}
</script>然后，添加下位置判断
function createDom(){
const left = select.value.offsetLeft + "px"
const width = select.value.getBoundingClientRect().left + "px"
const props = {
width,
left,
}
//1、创造包裹虚拟节点的div元素
const container = document.createElement('div');
//2、创造虚拟节点
let vm = createVNode(Select,props)
//3、将虚拟节点创造成真实DOM
render (vm, container)
//4、将渲染的结果放到body下
document.body.appendChild(container.firstElementChild)
}其中，prop是传递给Select组件的距离参数，在组件内设置即可。
销毁组件，我们可以使用render渲染一个空对象即可
render (vm, container)
如果需要子组件来销毁自身，我们可以使用父子传值
<template>
<div class="select-wrap" @mouseleave="beforeUnload">
<span>福利商城</span>
<span>Saas平台</span>
<span>活动定制</span>
</div>
</template>
<script setup>
const emit = defineEmits(['destroy'])
function beforeUnload(){
emit('destroy')
}
</script>父组件里，我们需要在props中添加一个onDestroy函数，注意：onDestroy是驼峰式写法
function createDom(){
const left = select.value.offsetLeft + "px"
const width = select.value.getBoundingClientRect().left + "px"
const props = {
width,
left,
onDestroy: () => {
render(null, container)
},
}
//1、创造包裹虚拟节点的div元素
const container = document.createElement('div');
//2、创造虚拟节点
let vm = createVNode(Select,props)
//3、将虚拟节点创造成真实DOM
render (vm, container)
//4、将渲染的结果放到body下
document.body.appendChild(container.firstElementChild)
}
