Laravel9项目中Vue3无法同时挂载多个组件的解决方法

你第二种全局注册组件的写法逻辑本身没有错误，多组件挂载失败通常是三个原因导致：

• Vue实例挂载的#app根节点没有覆盖到你放置组件的位置，节点外的内容Vue无法解析
• Blade模板中组件标签名和全局注册的名称不匹配
• 修改前端代码后没有重新执行编译命令，改动未生效

方案1：单实例全局注册（推荐，同页面多组件共存场景用） #

1. 调整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.use(VueGoodTablePlugin);
app.component('datatable-physios', datatablePhysios)
app.component('datatable-treatment', datatableTreatment);
app.mount("#app")

2. 调整Blade模板结构：
   所有要渲染Vue组件的位置，必须全部包裹在<div id="app"></div>内部，组件标签用和注册名一致的短横线格式：

<div id="app">
    <!-- 页面其他内容 -->
    <datatable-physios />
    <datatable-treatment />
    <!-- 页面其他内容 -->
</div>

3. 重新执行前端编译命令：开发环境用npm run dev，生产环境用npm run build。

方案2：多实例独立挂载（不需要共用根节点的场景用） #

如果不想把整页内容都套在#app节点里，可以给每个组件单独创建Vue实例，挂载到独立的DOM节点上，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 physiosApp = createApp(datatablePhysios)
physiosApp.use(VueGoodTablePlugin);
physiosApp.mount("#physios-table")

// 挂载诊疗项目表格
const treatmentApp = createApp(datatableTreatment)
treatmentApp.use(VueGoodTablePlugin);
treatmentApp.mount("#treatment-table")

对应Blade模板不需要统一的根节点，直接给每个组件放对应id的容器即可：

<!-- 页面其他内容 -->
<div id="physios-table"></div>
<!-- 页面其他内容 -->
<div id="treatment-table"></div>
<!-- 页面其他内容 -->

• 页面不要出现重复id的DOM节点，比如多个id="app"的div会导致挂载异常
• 打开浏览器控制台查看报错，组件名拼写错误、资源路径不对都会直接导致组件不渲染
• 只要修改了resources/js下的文件，必须重新编译才会生效

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