Question

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

我几乎尝试了所有方法，包括createElement('component')和模板字符串传递“ is”道具，并尝试Vue.compile，结果如下：

Vue.compile不是函数

内部 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 vue函数（使用模板字符串）呈现已编译的createElement代码。

Answer 1

你安装了 Vue 编译器吗？（不确定 Nuxt 是否缺少它 - 请参阅 https://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) 的积分

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

1 个答案: