Vue3动态加载外部模板为自定义元素时message未定义问题排查

错误原因 #

• 你通过Vue.compile(this.template)得到的是包含渲染函数的对象，但直接将其作为参数传给Vue.h，相当于创建了一个独立的匿名组件，这个组件的作用域和当前自定义元素的data上下文完全隔离，因此无法访问到message变量。
• 原代码中动态设置template后再编译的方式，不符合Vue自定义元素的渲染逻辑，created钩子中修改template无法自动触发正确的上下文绑定。

正确实现方式 #

方案一：使用异步模板函数（官方推荐） #

Vue支持将template选项设为返回模板字符串的异步函数，框架会自动处理模板的加载、编译和上下文绑定，无需手动处理渲染逻辑：

async function getTemplate() {
  // 替换为真实的外部模板请求，例如：
  // const response = await fetch('/external-template.html');
  // return await response.text();
  return `
    <div>
      <h1>{{ message }}</h1>
    </div>
  `;
}

const MyCustomElement = Vue.defineCustomElement({
  data() {
    return {
      message: 'Hello, I am a Vue component!'
    };
  },
  // 直接传入异步模板函数
  template: async () => await getTemplate()
});

customElements.define('my-component', MyCustomElement);

Vue.createApp({}).mount('#app');

方案二：手动替换组件渲染函数 #

如果需要在钩子中手动处理模板加载，可以将编译后的渲染函数赋值给组件的$options.render，确保其在当前组件上下文执行：

async function getTemplate() {
  return `
    <div>
      <h1>{{ message }}</h1>
    </div>
  `;
}

const MyCustomElement = {
  data() {
    return {
      message: 'Hello, I am a Vue component!'
    };
  },
  async created() {
    const template = await getTemplate();
    // 编译模板并替换当前组件的渲染函数
    this.$options.render = Vue.compile(template).render;
    // 强制触发重新渲染
    this.$forceUpdate();
  },
  // 初始加载状态
  render() {
    return Vue.h('div', 'Loading...');
  }
};

const element = Vue.defineCustomElement(MyCustomElement);

customElements.define('my-component', element);

Vue.createApp({}).mount('#app');

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