Vue 3如何在根元素内渲染PHP输出的全局组件（Sage Roots v10）

安全阿岳

2026-8-20

解决方案

问题出在你创建的空根组件没有模板逻辑来保留挂载元素内的现有DOM内容——Vue 3默认会替换挂载目标的innerHTML，而不是复用其中的内容。以下是两种可行的修复方案：

方案一：给根组件添加插槽模板

修改app.js，给空根组件添加<slot/>模板，让Vue渲染挂载元素内的现有内容（也就是PHP输出的<MainHeader>组件）：

import Header from './components/Header'
import router from "@scripts/router";

// 根组件通过插槽保留挂载元素内的DOM内容
const app = createApp({
  template: '<slot/>'
})

app
  .component('MainHeader', Header)
  .use(router)
  .mount('#wp-vue-app');

方案二：复用原有App.vue作为根组件（推荐）

如果你想保留原来的App.vue结构，只需给App.vue添加插槽，同时注册全局组件：

修改app.js，恢复引入App.vue并注册全局组件：

import App from './App.vue'
import Header from './components/Header'
import router from "@scripts/router";

const app = createApp(App)

app
  .component('MainHeader', Header)
  .use(router)
  .mount('#wp-vue-app');

在App.vue中添加插槽，用于渲染PHP输出的内容：

<template>
  <!-- 插槽用于接收挂载元素内的组件 -->
  <slot></slot>
  
  <!-- 这里可以保留App.vue原有的其他内容 -->
</template>

额外注意事项

确保Header.vue正确定义了接收的props，Vue会自动将模板中的menu-items（kebab-case）映射为组件内的menuItems（camelCase）：

<template>
  <header>
    <!-- 使用props渲染菜单 -->
    <nav>
      <ul>
        <li v-for="item in menuItems" :key="item.ID">
          <a :href="item.url">{{ item.title }}</a>
        </li>
      </ul>
    </nav>
  </header>
</template>

<script setup>
const props = defineProps({
  menuItems: {
    type: Array,
    required: true
  }
})
</script>