在 Symfony 中将 Twig 变量传递给 Vue.js

Question

我是运行 Symfony 4 应用程序，启用了 Vue.js。将我的数据从 Twig 模板发送到 Vue.js 组件有什么好的做法吗？目前，我的 header 组件上有许多数据项，HTML 元素数据部分如下所示：

<header-nav class="headnav headnav-fixed z-depth-1"
            logo="{{ asset('build/images/site_logo.png') }}"
            username="{{ app.user.name }}"
            logout-url="{{ path('logout') }}"
            logout-title="{% trans %} Logout {% endtrans %}"
            instruction-url="{{ path('system_instruction_download') }}"
            instruction-title="{% trans %} Download instruction {% endtrans %}"
            current-locale="{{ app.request.getLocale()|upper }}"
            v-bind:locales="{{ locales|json_encode }}"
>

假设我有许多不同的 URL 和其他东西。发送数据的最佳方式是什么？我应该先在我的控制器上准备一个 URL 的数组吗？如果我想准备一些将在我的header上使用的全局变量，应该是哪个控制器，所以它们不应该只锁定在一个控制器上。

Answer 1

假设你渲染多个"vue applications"，你可以用

定义全局变量

1) 树枝配置

Documentation 说： “Twig 允许自动将一个或多个变量注入所有模板。这些全局变量在主 Twig 配置文件中的 twig.globals 选项中定义

2) 您可以创建带有函数合并变量的抽象控制器

// MyAbstractController.php
protected function getTwigVariables(array $vars) { 
    $globals = [];
    // ... fill $globals with your stuff
    return array_merge(['globalVar1' => ], $vars);
}

// TestController extends MyAbstractController
public function indexAction() {
    //...
    return $this->render('viewPath.html.twig', $this->getTwigVariables([
        'specificVariable' => 'variableContent'
    ]));
}

你也可以 embed controllers 在你的主枝里面。您可以创建 headerAction、footerAction 等，并为此操作创建子请求。

为了存储变量，您也可以使用脚本标签

// twig
<script id="serverJson" type="application/json">{{ jsonContent|json_encode()|raw }}</script>

// serverJson.js
const configElement = document.getElementById("serverJson");
export default JSON.parse(configElement.innerHTML);

// ViewTemplate.vue
import serverJson from "path-to-serverJson.js"

在 Symfony 中将 Twig 变量传递给 Vue.js

Passing Twig variables to Vue.js in Symfony

symfony

twig

vue.js