twig与vue间变量传递的几种方法

自动摘要

正在生成中……

方法一：使用json输出到页面的script标签

// twig
//该方法来自：https://www.nuomiphp.com/eplan/en/264554.html
<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"

一些扩展，这种方式甚至可以配合 schema 的 JSON-LD ，获得 SEO 上的加成，此时script的type应该修改，写成：

<script type="application/ld+json">...</script>

关于schema数据结构：

https://schema.org/ItemList

关于JSON-LD(wiki百科): 

https://en.wikipedia.org/wiki/JSON-LD

方法二：通过子组件的prop传递

vue的子组件可以通过prop接收外部数据，因此可以直接将twig的变量传入到子组件中，不用管变量是数字、对象、字符串或者其他类型均可。例如：

<!-- page.twig -->
{% set fruits = ['apple', 'banana'] %}
{% set fruitEmoji = { 'apple': '?', 'banana': '?' } %}

<emoji-fruit-component 
  :fruits="{{ fruits | json_encode | raw }}"
  :fruitemoji="{{ fruitEmoji | json_encode | raw }}">
</emoji-fruit-component>

/* page.js */
// create a component, and accept our data with props

Vue.component('emoji-fruit-component', {
  props: ['fruits', 'fruitEmoji'],
  template: '...'
})

注意：此时务必使用json_encode过滤器，令变量易被 js 读取，另外要使用raw过滤器，使HTML字符编码如引号能正确输出。

方法三：放入 window 全局变量

<!-- page.twig -->
{% set fruits = ['apple', 'banana'] %}
{% set fruitEmoji = { 'apple': '?', 'banana': '?' } %}

<script>
  window.craftData = {
    fruits: {{ fruits | json_encode | raw }},
    fruitEmoji: {{ fruitEmoji | json_encode | raw }},
  }
</script>

/* fruit-page.js */
// load the data into your root Vue instance
new Vue({
  el: '#vue-app',
  data: window.craftData
})
// load the data into a single Vue component
Vue.component('emoji-fruit-component',{
  template: '...',
  data() { return window.craftData }
})

如何决定使用哪种方式

• 如果需要访问vue的根实例， 由于根实例无法通过prop传入数据，此时应使用方法一或者方法三
• 如果不想在bundle中包含vue渲染器，避免使用 Dom 模板总是一个推荐做法，具体原因可以查看这篇文章
• 对其它场景，通常使用方法一和方法三，因为...简单。

参考文章:

1. https://simplygoodwork.com/blog/passing-your-craft-cms-data-to-vue-js-with-twig
2. https://vuejsdevelopers.com/2017/09/17/vue-js-avoid-dom-templates/
3. https://www.nuomiphp.com/eplan/en/264554.html