非Blade环境下如何将PHP对象或数组传递给Vue Prop？

核心问题原因 #

你遇到的绑定失效，本质是json_encode输出的JSON字符串里包含HTML转义字符（比如"），或者引号冲突，导致Vue无法正确解析这个JS表达式。

可行解决方案 #

方案1：先转成全局JS变量再引用

这是最稳妥的方式，避免HTML转义和引号冲突：

1. 在页面的<script>标签里先把PHP变量转为全局JS对象：

<script>
// 用JSON_HEX系列参数把HTML特殊字符转成十六进制，避免破坏结构
window.frontLanguage = <?= json_encode($frontLanguage, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP); ?>;
</script>

2. 然后在Vue组件里直接引用这个全局变量：

<vue-component :language="window.frontLanguage" inline-template>
  <!-- 你的inline-template内容 -->
</vue-component>

方案2：解码转义字符后直接绑定

如果不想用全局变量，可以对json_encode的结果做转义解码，同时用单引号包裹绑定值：

<vue-component 
  :language='<?= htmlspecialchars_decode(json_encode($frontLanguage), ENT_QUOTES); ?>' 
  inline-template
>
  <!-- 你的inline-template内容 -->
</vue-component>

htmlspecialchars_decode会把json_encode生成的"这类转义字符还原成双引号，用单引号包裹绑定值，就能避免和内部的双引号冲突，Vue可以正确识别为JS对象。

注意事项 #

• 必须保留json_encode：PHP的数组/对象无法直接被Vue识别为JS对象，必须转成合法的JSON格式。
• 确保$frontLanguage是可被json_encode处理的合法数据（不能包含资源类型等无法序列化的内容）。

内容的提问来源于stack exchange，提问作者Santiago Cuartas Arango