如何通过Vite和Twig将Symfony控制器数据传给Vue3组件

问题核心 #

• Twig模板中无法直接通过Vue语法传递props
• 自定义Vue组件在#app容器内无法正常渲染

步骤1：修复自定义组件渲染问题 #

当前App.vue是完整布局组件，挂载后不会解析Twig中#app内的自定义组件，因为模板缺少插槽来接收外部内容。

修改App.vue添加插槽 #

<script setup lang="ts">
import BaseLayout from "./layout/BaseLayout.vue";
import StickyBanner from "./patterns/StickyBanner.vue";
</script>
<template>
  <BaseLayout>
    <template #header>
      <h1>Header</h1>
      <StickyBanner />
    </template>
    <template #main>
      <!-- 添加插槽，接收Twig传入的组件 -->
      <slot></slot>
    </template>
    <template #footer>
      <h1>Footer</h1>
    </template>
  </BaseLayout>
</template>
<style lang="scss" scoped></style>

调整组件注册时机 #

在app.ts中先注册组件再挂载Vue实例，同时遵循HTML自定义元素规范使用短横线命名组件：

import {createApp} from "vue";
import App from "./vue/App.vue";
import ModeSwitcher from "./vue/patterns/ModeSwitcher.vue";

const app = createApp(App);
// 先注册组件，再挂载实例
app.component('mode-switcher', ModeSwitcher);
app.mount('#app');

步骤2：从Symfony控制器传递数据到Vue组件 #

方法一：通过HTML属性绑定Props #

1. 控制器传递数据

在Symfony控制器中将数据转为JSON并传入Twig：

// src/Controller/VueController.php
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class VueController extends AbstractController
{
    #[Route('/vue', name: 'app_vue')]
    public function index(): Response
    {
        $componentData = [
            'username' => 'SymfonyVueUser',
            'theme' => 'dark'
        ];
        
        return $this->render('vue/index.html.twig', [
            'componentData' => json_encode($componentData)
        ]);
    }
}

2. Twig模板绑定Props

使用v-bind（简写:）绑定JSON数据，通过|raw过滤器避免Twig转义：

{% extends 'base.html.twig' %}

{% block title %}Hello VueController!{% endblock %}

{% block body %}
<div>
    <div id="app">
        <mode-switcher :component-data="{{ componentData|raw }}"></mode-switcher>
    </div>
</div>
{% endblock %}

3. Vue组件接收Props

在ModeSwitcher.vue中定义并使用props：

<template>
  <div ref="themeToggleBtn" @click="console.log(componentData)">
    <button>Hello {{ componentData.username }}</button>
  </div>
</template>
<script setup lang="ts">
import { defineProps } from 'vue';

const props = defineProps({
  componentData: {
    type: Object,
    required: true
  }
});
</script>

方法二：通过全局window对象传递数据 #

适合多组件共享或大数据场景，在Twig中挂载数据到全局：

{% block body %}
<script>
window.symfonyData = {{ componentData|raw }};
</script>
<div>
    <div id="app">
        <mode-switcher></mode-switcher>
    </div>
</div>
{% endblock %}

在Vue组件中直接调用全局数据：

<script setup lang="ts">
const symfonyData = window.symfonyData;
</script>

步骤3：验证配置 #

确保vite.config.ts中symfonyPlugin和vue插件已启用，无配置冲突。重启Vite和Symfony服务器后，组件即可正常渲染并接收控制器数据。

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