私はVueJS 2でブログを構築しています。私の記事のほとんどはMarkdownファイルとして保存されていますが、マークダウンでは扱えない機能を使って、より高度なトピックを扱うことができます。私はテンプレートで<article-name>、または<special-article article-title="{{articleTitle}}">として使用されるこれらの特別投稿VueJSコンポーネントを作ることを検討しています。ものすごく単純。VueJSでテンプレートに追加されたコンポーネントを動的にコンパイルする方法は？
私はコンポーネントが既にロードされているので、テンプレート文字列を実際のテンプレートにコンパイルするだけです。私はVueではなく、AngularJSのバックグラウンドをあまりにも多く考えているかもしれません。
VueJSのテンプレートにコンポーネントを動的に追加するための方向性が見つかりません。
Vue.compileでテンプレートをコンパイルできます。すべてのビルドで利用できるわけではありません。それはドキュメントに記載されています。
関連するデータを取得する作業はもう少しです。
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は組み込みコンポーネントこのシナリオのためにしています
<component is="article-component-name"></component>
あなたはこれが必要なのですか？ https://vuejs.org/v2/guide/components.html#Dynamic-Components –
@KresimirPendic yup！これらのソリューションは、私が必要としていたよりも複雑でした。もっと簡単な解決方法については、他の答えを確認してください。 – elliottregan