我可以在 .vue 文件中使用渲染函数吗

Question

我希望为组件动态设置 html 标签。例如：

  components: {
    test: {
      props: ['tag', 'attributes'],
      render(createElement) {
        return createElement(this.tag || 'div', {attrs: this.attributes || {}}, this.$slots.default);
      }
    }
  }

然后我可以在 html 文件中使用这样的代码：

<test tag="a" :attributes="{href:'http://www.google.com'}">a tag content</test>
<test tag="p">p tag content</test>

现在，我想做的是使用 Vue Loader 之类的工具拆分我的组件。基本上，我想将不同的组件拆分成不同的文件，然后使用 main.js 文件导入它们。

我试过类似的方法，但它不起作用：

// components/test.js 
export default {
  components: {
    test: {
      props: ['tag', 'attributes'],
      render(createElement) {
        return createElement(this.tag || 'div', {attrs: this.attributes || {}}, this.$slots.default);
      }
    }
  }
}

// main.js
import Vue from 'vue'  // don't think this is relevant, but it's there
import Test from './components/Test.js'
new Vue({
    el: '#app',
    components: {
        Test
    }
})

这个想法行不通。

知道如何让它工作吗？

谢谢

Answer 1

结构test.js像这样：

export default {
      props: ['tag', 'attributes'],
      render(createElement) {
        return createElement(this.tag || 'div', {attrs: this.attributes || {}}, this.$slots.default);
      }
}

我可以在 .vue 文件中使用渲染函数吗

Can I use a Render Function inside a .vue File

vue.js

vue-component

vuejs2