使用vue3-runtime-template出现渲染属性未在实例上定义错误如何解决

报错原因 #

vue3-runtime-template 渲染的运行时模板拥有独立的上下文作用域，父组件的data、计算属性、方法默认不会自动注入到该作用域内，你在模板字符串 <div>{{ getConvertedText }}</div> 中访问的getConvertedText没有被传入运行时模板的上下文，所以会抛出未定义的错误。

修复方案 #

方案1：主动注入需要的上下文变量 #

给VRuntimeTemplate组件绑定你需要在运行时模板中使用的所有变量即可，修改模板部分代码：

<template>
<v-container>
  <v-runtime-template :template="text" v-bind="{ getConvertedText }"></v-runtime-template>
</v-container>
</template>

如果后续运行时模板里用到了其他父组件的属性、方法，都可以放到v-bind的对象里统一传入。

方案2：直接拼接模板字符串 #

如果你的运行时模板不需要响应父组件的变量变化，可以直接把计算属性的返回值拼入模板字符串，不需要在模板里绑定变量：

<script>
import xmlStr from '../assets/sample.xml'
import xslStr from '../assets/sample.xsl'
import VRuntimeTemplate from "vue3-runtime-template"
export default {
  name: 'Edition',

  components: {
    VRuntimeTemplate,
  },
  computed: {
    text() {
      return `<div>${this.getConvertedText}</div>`
    },
    getConvertedText() {
      var xml = new DOMParser().parseFromString(xmlStr, 'text/xml')
      var xsl = new DOMParser().parseFromString(xslStr, 'text/xml')
      var xsltProcessor = new XSLTProcessor()
      xsltProcessor.importStylesheet(xsl)
      return xsltProcessor.transformToDocument(xml).documentElement.outerHTML
    },
  },
}
</script>

内容的提问来源于stack exchange，提问作者Takatomo