创建了一个动态组件，VUE 工作但打印警告“模板或渲染功能未定义”

Posted 2023-02-22

【中文标题】创建了一个动态组件，VUE 工作但打印警告“模板或渲染功能未定义”

【英文标题】：Created a dynamic component, VUE works but prints an warning "template or render function not defined"

【发布时间】：2021-07-28 11:11:53

【问题描述】：

我正在创建一个像这样的动态降价组件

<div v-highlight :is="markdownComponent"></div>

在计算中：

computed: 
    markdownComponent() 
      return 
        template: this.html,
        data() 
          return 
        ,
        methods:  
      
    
  

this.html 是使用 markdown-it 动态创建的。我创建了一个 code_block/fence 规则来增强 pre > code 块。 this.html 的一个例子是：

<div>
    <div class="code-header">
        <span class="code-language">
            Python
        </span>
        <a class="code-copy" @click="copyText('xxxx')">
        <i class="fa fa-copy"></i>
            Copy
        </a>
    </div>
  <pre>highlighted data</pre>
</div>

它可以工作，但 VUE 会打印一个警告

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Anonymous>
       <Notes2> at src/note.vue
         <App> at src/App.vue
           <Root>

如果我添加一个空的渲染函数，警告将会消失，但页面也会被清空：

computed: 
    markdownComponent() 
      return 
        render(h) 
           return h('div', , [])
        ,
        template: this.html,
        data() 
          return 
        ,
        methods:  
      
    
  

如何添加“默认”渲染功能？我需要在停止 VUE 打印该警告的同时正确呈现页面。

编辑

我已经检查过Vue template or render function not defined yet I am using neither? 它没有提供解决此问题的方法

【问题讨论】：

这能回答你的问题吗？ Vue template or render function not defined yet I am using neither?

geauser 可能是对的。什么是this.html - 它来自哪里以及它的外观如何？还为您正在使用的 Vue 版本添加适当的标签...

@MichalLevý 它是从 markdown-it 动态创建的。我只需要在“pre > code”元素中添加一个复制按钮。我在问题中附上了一个例子

现在，检查哪个 Vue 包 you are using

另外注意@daisy，您可以简单地修改现有元素的innerHTML，而不是为您的降价语料库创建新组件。我可能会让你的代码更清晰。

【参考方案1】：

看起来可能不是这样，但Vue template or render function not defined yet I am using neither? 确实解决了您的问题...

Runtime + Compiler vs. Runtime-only

了解 Vue 模板总是编译成纯 JavaScrit 很重要（只需尝试将您的 this.html 示例粘贴到 vue-compiler-online 中。当您使用 vue 文件时，您是可能使用一些捆绑器（例如 Webpack - 直接或通过 VueCLI），它使用vue-loader 在构建时进行此编译。这就是为什么 Vue 项目通常使用不包含模板编译器的 Vue 构建。

但是如果你在某处使用template（即使在这样的项目中），你需要带有编译器的Vue包......

另一方面，如果 Markdown 的渲染输出中只有“Vue”功能——它是 @click 处理程序，你可以在没有 template 的情况下做到这一点（并且没有 Vue 编译由将其标记为 JS，然后再次将其呈现为静态 HTML）

删除你的code_block/fence修改 创建一个合适的markdownComponent.vue（见下文） 如果 markdown 来自不受信任的来源（用户）并且您将 html:true 传递给 markdown-it 构造函数，请执行 proper sanitization of the markdown-it output 使用 v-html 渲染由 markdown-it 生成的 HTML

<template>
  <div>
    <div class="code-header">
        <span class="code-language">
            Python
        </span>
        <a class="code-copy" @click="copyText(html)">
        <i class="fa fa-copy"></i>
            Copy
        </a>
    </div>
    <pre v-html="html"></pre>
  </div>
</template>

<script>
export default 
  props: ['html'],
  methods: 
    copyText() 
      .....
    
  

<script>

【参考方案2】：

我已经解决了这个问题

在markdownComponent中：

markdownComponent() 
  let html = this.html

  return 
    render(h) 
      return h('div', 
        domProps: 
          innerHTML: html
        ,
        on: 
          click: this.clickHandler
        ,
      )
    ,
    data() 
      return 
    ,
    methods: 
      clickHandler(event) 
        let b64data = event.target.getAttribute('data-src')
        let data = Base64.decode(b64data).trim()
        this.$copyText(data)
      ,
    
  

在 code_block/fence 规则中，删除 @click 处理程序并添加一个 HTML 属性。

VUE 不再抱怨了..