如何在VueJS中动态编译添加到模板的组件? [英] How to dynamically compile a component added to a template in VueJS?

问题描述

我正在使用 VueJS 2 构建博客.我的大部分文章都存储为 Markdown 文件，但我希望我能够使用 Markdown 未涵盖的功能涵盖一些更高级的主题.我正在考虑将这些特殊的帖子 VueJS 组件作为 <article-name> 或 <special-article article-title="{{articleTitle}} 在模板中使用">.很简单.

我已经加载了组件，所以我需要做的就是将模板字符串编译成一个真正的模板.我可能对我的 AngularJS 背景而不是 Vue 考虑得太多.

我找不到在 VueJS 中将组件动态添加到模板的可靠方向.

解决方案

您可以使用 Vue.compile.请注意，它并非在所有版本中都可用.文档中对此进行了介绍.

获取与之关联的数据需要更多的工作.

console.clear()const 文章 = [{title: "测试",文章模板:<文章标题>"},{title: "测试 2",articleTemplate: "<special-article :article-title='title'></special-article>"},]Vue.component("文章标题",{模板:`<span>文章标题</span>`})Vue.component("特殊文章", {道具:[文章标题"]，模板:`<div><h1>{{articleTitle}}</h1><p>一些文章文本</p>

`})新的 Vue({el: "#app",数据:{文章},计算:{编译的文章(){返回 this.articles.map(a => {//编译模板让模板 = Vue.compile(a.articleTemplate)//使用编译模板构建一个组件定义对象.//data 函数返回什么取决于你在哪里//数据来自.return Object.assign({}, template, {data(){return a}})})}}})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.min.js"></script><div id="应用程序"><component v-for="article incompiledArticles" :is="article"></component>

I am building a blog with VueJS 2. Most of my articles are stored as Markdown files, but I want to me able to cover some more advanced topics, using features that Markdown doesn't cover. I am considering making these special posts VueJS components that would be used in a template as <article-name>, or <special-article article-title="{{articleTitle}}">. Pretty simple.

I have the component loaded already, so all I need to do is compile the template string into a real template. I might be thinking too much with my AngularJS background rather than with Vue.

I can't find any solid direction for dynamically adding a component to a template in VueJS.

解决方案

You can compile a template with Vue.compile. Just be aware it's not available in all builds. That's covered in the documentation.

Getting the data associated with it is a little more work.

console.clear()

const articles = [
  {
    title: "Testing",
    articleTemplate: "<article-title></article-title>"
  },
  {
    title: "Testing 2",
    articleTemplate: "<special-article :article-title='title'></special-article>"
  },
]

Vue.component("article-title",{
  template: `<span>Article Title</span>`
})

Vue.component("special-article", {
  props:["articleTitle"],
  template: `
    <div>
      <h1>{{articleTitle}}</h1>
      <p>Some article text</p>
    </div>
  `
})

new Vue({
  el: "#app",
  data:{
    articles
  },
  computed:{
    compiledArticles() {
      return this.articles.map(a => {
        // compile the template
        let template = Vue.compile(a.articleTemplate)
        // build a component definition object using the compile template.
        // What the data function returns is up to you depending on where 
        // the data comes from.
        return Object.assign({}, template, {data(){return a}})
      })
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.min.js"></script>
<div id="app">
  <component v-for="article in compiledArticles" :is="article"></component>
</div>

这篇关于如何在VueJS中动态编译添加到模板的组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！