如何渲染加载的局部视图中的Vue.js组件

问题背景 #

使用Dialog.vue组件通过axios加载Blade局部视图作为对话框内容时，静态HTML能正常显示，但局部视图中包含的Vue自定义组件（如<hh-reason-picker>）无法被渲染。当前实现是通过v-html插入获取到的HTML字符串，但v-html仅处理纯HTML，不会触发Vue的组件编译流程。

解决思路 #

需要手动对动态获取的HTML进行Vue编译，并将其挂载到目标容器中，同时注意在组件销毁或重新加载时清理已挂载的实例，避免内存泄漏。

具体实现（Vue2版本） #

1. 修改Dialog.vue的脚本逻辑 #

import Vue from 'vue'

export default {
  data() {
    return {
      mountedInstance: null // 保存已挂载的Vue实例，用于后续清理
    }
  },
  methods: {
    loadPartial() {
      axios.get('/dialogs/' + this.partial).then(response => {
        // 先清理之前的实例
        if (this.mountedInstance) {
          this.mountedInstance.$destroy()
          this.mountedInstance = null
        }
        
        this.$nextTick(() => {
          const container = this.$el.querySelector('.l-dialog__content')
          // 创建临时组件并挂载到容器
          const TempComponent = Vue.extend({
            template: response.data
          })
          this.mountedInstance = new TempComponent().$mount(container)
        })
      }).catch(error => {
        console.error(error)
      })
    }
  },
  // 组件销毁时清理实例
  beforeDestroy() {
    if (this.mountedInstance) {
      this.mountedInstance.$destroy()
      this.mountedInstance = null
    }
  }
}

2. 修改模板结构 #

移除v-html，只保留空的容器：

<div class="l-dialog__content"></div>

Vue3版本适配 #

如果项目使用Vue3，调整脚本逻辑如下：

import { createApp } from 'vue'

export default {
  data() {
    return {
      mountedApp: null
    }
  },
  methods: {
    loadPartial() {
      axios.get('/dialogs/' + this.partial).then(response => {
        if (this.mountedApp) {
          this.mountedApp.unmount()
          this.mountedApp = null
        }
        
        this.$nextTick(() => {
          const container = this.$el.querySelector('.l-dialog__content')
          this.mountedApp = createApp({
            template: response.data
          }).mount(container)
        })
      }).catch(error => {
        console.error(error)
      })
    }
  },
  beforeUnmount() {
    if (this.mountedApp) {
      this.mountedApp.unmount()
      this.mountedApp = null
    }
  }
}

关键注意事项 #

• 确保需要渲染的Vue组件（如hh-reason-picker）已全局注册，或在临时组件中局部注册
• 每次加载新的局部视图前，必须销毁/卸载之前的实例，避免DOM残留和内存泄漏
• 利用$nextTick确保容器已挂载到DOM后再进行编译挂载操作

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