Question

我有一个 Symfony 5 项目，其中安装了 vue 2.6。在 Twig 模板中，我在两个地方插入了一个 vue 组件。这有效。现在我想在两个地方向这个 vue 组件插入不同的变量，如下所示：

<logo-image v-bind:logo-width="800"></logo-image>
[...]
<logo-image v-bind:logo-width="400"></logo-image>

这是 vue.js 文件：

Vue.component('logo-image', {
props: {
    logoWidth: {
        type: Number,
        required: true,
    }
},
render: (h) => h(LogoImage),
})

new Vue({
    store,
}).$mount('#vue-logoimage');

这里是 LogoImage.vue

<template>
  <div>
    <h1>{{ logoWidth }}</h1>
  </div>
</template>

<script>
export default {
  name: "LogoImage",
  props: {
    logoWidth: {
      type: Number,
      required: true,
    }
  },
}
</script>

<style lang="scss">

</style>

该变量未到达 LogoImage.vue 文件

现在是有趣的部分：

如果我在 vue.js 中直接指定模板，是这样的：

Vue.component('logo-image', {
    props: {
        logoWidth: {
            type: Number,
            required: true,
        }
    },
    template: '<h1>{{logoWidth}}</h1>'
})

完美运行

将变量从 Symfony/Twig 传递给 vue

0 个答案: