Vue3 如何动态渲染组件并插入已渲染模板？

1. 封装下拉菜单组件 #

先把你提供的ul模板封装成独立Vue组件，方便复用和数据传递：

// 可直接写在datatable_app.js中，或单独创建MenuDropdown.js文件
const MenuDropdown = {
  props: {
    // 接收主应用传递的菜单数据
    menuItems: {
      type: Array,
      required: true
    }
  },
  methods: {
    setValue(item) {
      // 触发关闭事件，同时可将选中项回传给主应用
      this.$emit('menu-close', item)
    }
  },
  template: `
    <ul class="dropdown-menu">
      <li v-for="item in menuItems" :key="item" @click="setValue(item)">{{ item }}</li>
    </ul>
  `
}

2. 改造主应用逻辑 #

在DataTable主应用中添加状态管理和事件处理，实现菜单的显示、数据填充与关闭：

// datatable_app.js
export default {
  components: {
    MenuDropdown // 注册下拉组件
  },
  data() {
    return {
      isMenuVisible: false,
      currentMenuData: [],
      // 记录点击的a标签，用于定位菜单插入位置
      activeLink: null
    }
  },
  methods: {
    openMenu(event) {
      // 阻止a标签默认跳转行为
      event.preventDefault()
      
      this.activeLink = event.target
      // 根据点击的Link填充对应数据（示例为每个Link分配不同数据，按需调整）
      const linkName = this.activeLink.textContent.trim()
      switch(linkName) {
        case 'Link1':
          this.currentMenuData = ['Link1-选项1', 'Link1-选项2', 'Link1-选项3']
          break
        case 'Link2':
          this.currentMenuData = ['Link2-选项1', 'Link2-选项2', 'Link2-选项3']
          break
        case 'Link3':
          this.currentMenuData = ['Link3-选项1', 'Link3-选项2', 'Link3-选项3']
          break
        case 'Link4':
          this.currentMenuData = ['Link4-选项1', 'Link4-选项2', 'Link4-选项3']
          break
      }
      // 显示菜单
      this.isMenuVisible = true
    },
    closeMenu(selectedItem) {
      // 可选：处理选中的菜单项，比如保存到主应用数据
      console.log('选中内容:', selectedItem)
      // 隐藏并重置状态
      this.isMenuVisible = false
      this.activeLink = null
    }
  },
  template: `
    <div>
      <a rel="link" href="#" @click="openMenu">Link1</a>
      <a rel="link" href="#" @click="openMenu">Link2</a>
      <a rel="link" href="#" @click="openMenu">Link3</a>
      <a rel="link" href="#" @click="openMenu">Link4</a>

      <!-- 使用Teleport将菜单插入到点击的a标签后方 -->
      <Teleport 
        :to="activeLink ? activeLink.nextElementSibling : null" 
        v-if="isMenuVisible"
      >
        <MenuDropdown 
          :menuItems="currentMenuData" 
          @menu-close="closeMenu"
        />
      </Teleport>
    </div>
  `
}

3. 基础样式补充（可选） #

给下拉菜单加样式避免布局混乱：

.dropdown-menu {
  margin: 8px 0;
  padding: 0;
  list-style: none;
  border: 1px solid #eee;
  border-radius: 4px;
  width: 150px;
}
.dropdown-menu li {
  padding: 8px 12px;
  cursor: pointer;
}
.dropdown-menu li:hover {
  background-color: #f5f5f5;
}

替代方案：动态创建组件实例 #

如果不想用Teleport，可通过动态创建组件实例的方式直接挂载菜单到目标位置：

// 修改主应用的openMenu方法
openMenu(event) {
  event.preventDefault()
  const targetLink = event.target

  // 创建临时组件实例
  const menuApp = Vue.createApp({
    components: { MenuDropdown },
    data() {
      return {
        // 按需填充对应数据
        menuItems: ['选项1', '选项2', '选项3']
      }
    },
    methods: {
      closeMenu() {
        // 卸载组件，自动删除DOM
        menuApp.unmount()
      }
    },
    template: '<MenuDropdown :menuItems="menuItems" @menu-close="closeMenu" />'
  })

  // 创建DOM容器并插入到点击的a标签后面
  const menuContainer = document.createElement('div')
  targetLink.after(menuContainer)
  // 挂载组件
  menuApp.mount(menuContainer)
}

内容的提问来源于stack exchange，提问作者Nikita Bel