如何在 v-html vuejs nuxt 中传递组件答案

【问题标题】：How to pass component in v-html vuejs nuxt如何在 v-html vuejs nuxt 中传递组件
【发布时间】：2021-07-06 12:12:26
【问题描述】：

我需要展示通过props传递的组件，并通过v-html输出。我找到了一个渲染解决方案。但我不知道如何在本地组件中应用它，因为我使用的是 nuxt。 Vue.compile(this.vcontent);报错

<script>
export default {
  props: ['vcontent'],
  data() {
    return {
      templateRender: null,
    }
  },
  render(h) {
    if (!this.templateRender) {
      return h('div', 'loading...');
    } else { // If there is a template, I'll show it
      return this.templateRender();
    }
  },
  watch: {

    vcontent:{
        immediate: true, // makes the watcher fire on first render, too.
      handler() {
        var res = Vue.compile(this.vcontent);

        this.templateRender = res.render;
        
        // staticRenderFns belong into $options, 
        // appearantly
        this.$options.staticRenderFns = []
        
        // clean the cache of static elements
        // this is a cache with the results from the staticRenderFns
        this._staticTrees = []
        
        // Fill it with the new staticRenderFns
        for (var i in res.staticRenderFns) {
          //staticRenderFns.push(res.staticRenderFns[i]);
          this.$options.staticRenderFns.push(res.staticRenderFns[i])
        }
      }
    }
  },
}
</script>

如果我尝试在组件中导入 Vue，webpack 会报错 vue__WEBPACK_IMPORTED_MODULE_0___default.a.compile is not a function

【问题讨论】：

标签： vue.js nuxt.js

【解决方案1】：

nuxt.config.js

    // if you are using webpack
    build: {
        extend(config, ctx){
            config.resolve.alias['vue'] = 'vue/dist/vue.common';
        }
    },
    
    // if you are using vite
    vite: {
        resolve: {
            alias: {
                'vue': 'vue/dist/vue.common'
            }
        },
    }

在内容中包含组件字符串的组件中 my-component.js

import Btn from '~/components/btn.vue';
export default{
    props: ['vcontent'],
    render(h){
        let self = this;
        return h({
            components: {
                Btn
            },
            template: self.vcontent
        });
    }
}

【讨论】：

【解决方案2】：

默认情况下，不包含 Vue 编译器，因此未定义 Vue.compile，但您可以在 Nuxt 配置中通过将 vue 别名为 "full" build 来启用它：

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

似乎手表处理程序需要等到$nextTick 才能真正调用Vue.compile：

// MyComponent.vue
export default {
  watch: {
    vcontent: {
      immediate: true,
      async handler() {
        await this.$nextTick()
        const res = Vue.compile(this.vcontent)
        //...
      }
    }
  }
}

demo

【讨论】：