使用defineAsyncComponent和render函数时$t报错及警告问题求助

1. 关于$t is not a function错误 #

你直接用render函数挂载组件时，动态创建的组件没有接入Vue的应用上下文，拿不到i18n提供的$t方法。这种手动渲染的方式没有继承父组件或全局app的插件（比如i18n）。

修正方案： #

不要直接用h+render，而是通过createApp挂载组件，自动继承全局插件和上下文：

import { createApp } from 'vue';

const addTest = async () => {
    const TestComponent = await defineAsyncComponent(() => import(`./test.vue`));
    const el = document.getElementById("Widget");
    // 清空目标元素，避免重复挂载
    el.innerHTML = '';
    // 创建app实例并挂载，自动继承全局上下文
    createApp(TestComponent).mount(el);
}

如果想保留render方式，需要手动传递上下文的appContext：

import { h, render, getCurrentInstance } from 'vue';

const addTest = async () => {
    const { appContext } = getCurrentInstance();
    const TestComponent = await defineAsyncComponent(() => import(`./test.vue`));
    const node = h(TestComponent, {}, { appContext });
    const el = document.getElementById("Widget");
    render(node, el);
}

2. 关于Fragment根节点的警告 #

你的test.vue模板有多个根元素（button和p），也就是Vue的Fragment节点，这种情况下组件无法自动继承传递过来的非props属性，所以抛出警告。

修正方案： #

给test.vue添加一个根包裹元素，把所有内容包起来：

<template>
  <div>
    <button>Click Me ah la</button>
    <p>{{$t(`test`)}}</p>
  </div>
</template>

这样组件有了单个根节点，警告会自动消失。

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