在 Vue.js 的插件组件中的 createElement 内渲染模板字符串

Question

我正在尝试在createElement function 中编译模板字符串。 我需要使用<nuxt-link />传递模板字符串。

我已经尝试了几乎所有的东西，包括createElement('component')用我的模板字符串传递“is”道具，并尝试Vue.compile得到如下结果：

Vue.compile 不是 function

内部index.vue

<template>
  <div>
    <example :tmpl="tmpl" />
  </div>
</template>
<script>
export default {
  name: "index",
  data() {
    return {
    };
  },
  computed: {
    tmpl() {
      return `<nuxt-link :to="${this.localePath({ name:'categories-index'}, this.$i18n.locale)}">Categories</nuxt-link>`;
    }
  }
};
</script>

在example.js里面我试过：

const Example = {
  install(Vue, options) {
    Vue.component('example', {
      render: function (createElement) {
        return createElement(
          'component',
          {
            props: {
              'is': this.tmpl
            }
          }
        )
      },
      props: {
        tmpl: {
          type: String,
          default: ""
        }
      },
      data() {
        return {
        }
      },
    });
  }
};
export default Example;

还有：

const Example = {
  install(Vue, options) {
    Vue.component('example', {
      render: function (createElement) {
        return createElement(
          'div',
          {
            'props': {
            }
          },
          // error: Vue.compile is not a function
          Vue.compile(this.tmpl)
        )
      },
      props: {
        tmpl: {
          type: String,
          default: ""
        }
      },
      data() {
        return {
        }
      },
    });
  }
};
export default Example;

还有：

const Example = {
  install(Vue, options) {
    Vue.component('example', {
      render: function (createElement) {
        return createElement(
          'div',
          {
            // error: nuxt-link is plain html instead of link
            domProps: {
              innerHTML: this.tmpl
            },
          }
        )
      },
      props: {
        tmpl: {
          type: String,
          default: ""
        }
      },
      data() {
        return {
        }
      },
    });
  }
};
export default Example;

最后一个渲染HTML ，但是vue代码没有编译，所以nuxt-link不起作用。

我希望使用vue createElement function （使用模板字符串）呈现编译的vue代码。

Answer 1

你安装了 Vue 编译器吗？ （不确定 Nuxt 是否缺少它 - 请参阅https://v2.vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only ）但Vue.compile is not a function可能暗示我它不见了？

可能类似于以下内容：

// nuxt.config.js
export default {
  build: {
    extend (config, { isClient }) {
      config.resolve.alias['vue$'] = 'vue/dist/vue.esm.js'
    }
  }
}

以上的学分（ https://forum.vuejs.org/t/nuxt-render-function-for-a-string-of-html-that-contains-vue-components/63645/2 ）