如何使用渲染方法为 VueJS 组件指定分隔符?

问题描述

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

new Vue({分隔符:['[[', ']]'],el: '#app',渲染:h =>h(应用程序)})

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

new Vue({分隔符:['[[', ']]'],el: '#app',数据() {返回 {//某物}}})

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

解决方案

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

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

const App = {模板:`
[[消息]]
`，分隔符:['[[',']]'],数据() {返回{消息:'你好'}}}新的 Vue({el: '#app',渲染:h =>h(应用程序)})

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

如果你想为每个组件设置 delimiters，你可以使用全局 mixin:

Vue.mixin({ delimiters: ['[[',']]'] });常量应用 = {模板:`
[[消息]]
`，数据() {返回{消息:'你好'}}}新的 Vue({el: '#app',渲染:h =>h(应用程序)})

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

I have a vuejs webpack-simple project generated via vue-cli. However, I'm unable to set the delimiters when using the render function to render my App component:

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

If I don't use the render method, the delimiters are set correctly:

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

How can I specify the delimiters for a Vue component when using the render method?

解决方案

The delimiters option only sets the delimiters for the component it is specified for and will not affect the children. Currently, you are specifying that the root Vue instance should have delimiters set to ['[[', ']]'], and then passing the App component definition to the render function without specifying a delimiters option for the App component.

If you're trying to set the delimiters just for the App component, then you'll need to do that wherever you are defining that component:

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>

If you want to set the delimiters for every component, you can do that with a global mixin:

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>

这篇关于如何使用渲染方法为 VueJS 组件指定分隔符?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！