Laravel9+Vue3在app.js中挂载多组件仅渲染首个组件问题

你写的代码始终只渲染datatablePhysios，是两处写法不符合Vue3规则导致的：

• createApp()接收的第一个参数是整个应用的根组件，你直接把datatablePhysios作为根组件传入，挂载后#app节点内默认只会渲染这个根组件的内容，其他注册的组件不会自动展示。
• 全局注册组件的语法错误：app.component()的第二个参数需要直接传入组件定义，你额外包了一层{}，相当于传入了一个普通对象而非组件，注册本身就没生效。

要实现和你Vue2项目里一样「全局注册所有组件，页面按需写标签渲染」的效果，只需要创建空根实例，按正确语法注册组件后挂载即可，修改后的app.js代码：

require('./bootstrap');
import { createApp } from "vue";
import VueGoodTablePlugin from 'vue-good-table-next';
import 'vue-good-table-next/dist/vue-good-table-next.css'
import datatablePhysios from "./components/datatablePhysios.vue";
import datatableTreatment from "./components/datatableTreatment.vue";

// 初始化空根应用，不要把单个业务组件设为根组件
const app = createApp({});

// 正确全局注册组件，第二个参数直接传导入的组件对象
app.component('datatable-physios', datatablePhysios);
app.component('datatable-treatment', datatableTreatment);

app.use(VueGoodTablePlugin);
app.mount("#app")

修改完成后重新编译前端资源，就可以在Blade模板的#app容器内直接写组件标签，同时渲染多个组件：

<div id="app">
    <datatable-physios />
    <datatable-treatment />
</div>

后续新增组件的逻辑和Vue2时期完全一致：先import组件文件，再调用app.component()注册即可在任意模板位置使用。

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