vue-cli如何通过字符串动态生成组件？

  • Z时代
  • 2024-02-08
  • 分类：IT

vue-cli如何通过字符串动态生成组件？

具体有两个问题，第一个已经解决，但第二个没有。

第一个问题

我有一个通过 webpack loader 得到的模板字符串，里面包含了一些自定义 vue 组件（<MDsnippet>xxx</MDsnippet> 之类的东西）

打算把这个字符串的内容渲染到页面上，首先不能用 {{ }}，也不能用 v-html，它们都不会处理字符串里面的 vue 内容

也就是说，我需要 vue 把字符串渲染生存一个组件，再插入到页面中

我的做法

在 vue.config.js 中加上 runtimeCompiler: true，然后在需要的页面这样写：

<template>
    <Content />
</template>
<script>
// 通过 webpack loader 读入 markdown 文件
const article = require("../posts/article.md");
export default {
    name: "Home",
    components: {
        Content: {
            template: article,
        },
    },
};
</script>

这样可以渲染，但我不知道对性能有没有影响

第二个问题

和上面的例子大体相似，但 require("xxx.md") 的路径要通过 this.$root.$route.path 计算得到

现在的问题是，在 components.Content.template 中无法调用 this.$root.$route.path （得不到 this）

回答：

第二个问题使用渲染函数应该可以。

let Content = null
export default {
    created(){
        const template = import(this.$root.$route.path)
        Content = Vue.extend({
            template
        })
    },
    render(h){
        return Content ? h(Content) : null
    },
}

以上是 vue-cli如何通过字符串动态生成组件？ 的全部内容， 来源链接： utcz.com/p/936231.html

回到顶部