vuejs2 - 如何使用 render 方法为 VueJS 组件指定分隔符？

Question

我有一个通过 vue-cli 生成的 vuejs webpack-simple 项目。但是，在使用 render 函数呈现我的 App 组件时，我无法设置分隔符:

new Vue({
  delimiters: ['[[', ']]'],
  el: '#app',
  render: h => h(App)
})

如果我不使用 render 方法，则 delimiters 设置正确:

new Vue({
  delimiters: ['[[', ']]'],
  el: '#app',
  data() {
    return {
      // something
    }
  }
})

如何在使用 render 方法时为 Vue 组件指定 delimiters？

Answer 1

delimiters 选项只为指定的组件设置分隔符，不会影响子组件。目前，您指定根 Vue 实例应将 delimiters 设置为 ['[[', ']]']，然后传递 App 组件定义到 render 函数，而不为 App 组件指定 delimiters 选项。

如果您只想为 App 组件设置分隔符，那么无论您在何处定义该组件，都需要这样做:

const App = {
  template: `<div>[[ message ]]</div>`,
  delimiters: ['[[',']]'],
  data() {
    return { message: 'Hello' }
  }
}

new Vue({
  el: '#app',
  render: h => h(App)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app"></div>

如果你想为每个组件设置分隔符，你可以使用全局混合来实现:

Vue.mixin({ delimiters: ['[[',']]'] });

const App = {
  template: `<div>[[ message ]]</div>`,
  data() {
    return { message: 'Hello' }
  }
}

new Vue({
  el: '#app',
  render: h => h(App)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app"></div>