如何在Twig模板中实现PHP向Vue3单文件组件传递数据？

一、如何获取挂载元素的data属性值 #

你可以在挂载Vue实例前先获取DOM元素的data属性，再传递给组件——这比在组件内直接操作DOM更符合Vue的设计思路：

1. 先读取挂载元素的data值：

// 获取挂载容器
const appContainer = document.getElementById('app');
// 读取data属性（dataset会自动把连字符转为驼峰，data-personid对应personid）
const personId = appContainer.dataset.personid;

2. 将值作为props传给根组件：
   先在你的根组件（比如App.vue）中定义props：

<!-- App.vue -->
<script setup>
const props = defineProps({
  personId: {
    type: String | Number,
    required: true
  }
});

// 拿到personId后即可调用后端API
// fetch(`/api/person/${props.personId}`)
</script>

然后在挂载Vue时传入props：

import { createApp } from 'vue';
import App from './App.vue';

const appContainer = document.getElementById('app');
const personId = appContainer.dataset.personid;

createApp(App, { personId }).mount(appContainer);

如果一定要在组件内直接获取挂载元素，也可以用document.getElementById('app')，但这种方式会让组件和页面DOM结构强耦合，不推荐。

二、这种传递方式是否推荐 #

通过挂载元素的data属性传递后端初始化数据是可行且常用的方案，尤其适合服务端渲染HTML和前端Vue混合开发的场景，属于服务端向客户端传递初始化数据的常规手段。

但更推荐的是通过props传递数据（如上面的例子），而非在组件内直接读取DOM的data属性，原因如下：

• 符合Vue组件化、响应式的设计理念，props是组件接收外部数据的标准方式
• 避免直接操作DOM，降低组件与页面结构的耦合度
• 能利用Vue的props类型校验、默认值等特性，提升代码健壮性

其他可选方案 #

除了data属性，还有两种常见的传递方式：

1. 全局初始化变量：适合需要传递多份初始化数据的场景，在Twig模板中直接输出全局变量：

<script>
window.__INITIAL_DATA__ = {
  personId: {{ personId }},
  // 可添加其他后端传递的数据
};
</script>

然后在Vue组件中直接访问：

const personId = window.__INITIAL_DATA__.personId;

注意要避免全局变量命名冲突，建议使用带有项目前缀的独特命名。

2. 直接通过组件props传递：如果你的Vue组件已注册为自定义元素，或者页面支持编译Vue模板语法，可直接在组件标签上绑定props：

<!-- 在Twig模板中 -->
<app-root :person-id="{{ personId }}"></app-root>

这种方式更直观，但需要确保Vue组件已正确注册，或页面能处理Vue的模板语法。

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