Question

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

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

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

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

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

Answer 1

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

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

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>，可以使用全局混音来实现：

delimiters

Vue.mixin({ delimiters: ['[[',']]'] });

const App = {
  template: `<div>[[ message ]]</div>`,
  data() {
    return { message: 'Hello' }
  }
}

new Vue({
  el: '#app',
  render: h => h(App)
})

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

1 个答案: