[英]VueJS: Render dynamic template for component
我的父頁面上有一個組件,如下所示:
Detail.vue
模板:
<feature-list :description="description"></feature-list>
腳本:
axios.get(`my/end/point`)
.then(res => {
this.description = res.data.product.description
})
.catch(function (error) {
console.log('error', error)
})
Features.vue
模板:
<component :is="subcomponent" :height="overallHeight" :width="overallWidth" :length="overallLength"></component>
腳本:
components: {
subcomponent: {
props: ['overallHeight', 'overallWidth', 'overallLength'],
/* template: this.description */
}
}
來自this.description
預期返回值:
<el-row :gutter="30">
<el-col :sm="24">
<ul class="dimensions d-flex">
<li class="dimension">
<img src="/length.jpg" alt="">
<h4 class="title">Length</h4>
<p class="base-copy">{{length}}</p>
</li>
<li class="dimension">
<img src="/height.jpg" alt="">
<h4 class="title">Height</h4>
<p class="base-copy">{{height}}</p>
</li>
<li class="dimension">
<img src="/width.jpg" alt="">
<h4 class="title">Width</h4>
<p class="base-copy">{{width}}</p>
</li>
</ul>
</el-col>
</el-row>
如何將模板發送到組件? 並渲染值(長度,寬度和高度)
像這樣的東西,唯一的區別是,模板來自ajax調用。
經過一番挖掘之后,我找到了解決此問題的方法,其想法是將template
和props
作為對象傳遞給is
prop。
該代碼將如下所示,
<component
:is="description && { template: `<div>${description}</div>`, props: ['height', 'width', 'length'] }"
:height="overallheight"
:width="overallwidth"
:length="overalllength">
</component>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.