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

Posted 2023-02-23

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

【英文标题】：Can I use a Render Function inside a .vue File

【发布时间】：2017-10-15 20:05:30

【问题描述】：

我希望为组件动态设置 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
    
)

这行不通。

知道如何让它工作吗？

谢谢

【问题讨论】：

文件名是小写的 test.js 并且您正在导入大写的 Test.js？

文件名是大写的 - Test.js。我只是将其更改为小写并将其导入为小写。没有变化（即同样的问题）。

【参考方案1】：

像这样构造 test.js：

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