VueJS：为组件渲染动态模板答案

【问题标题】：VueJS: Render dynamic template for componentVueJS：为组件渲染动态模板
【发布时间】：2018-10-20 15:50:34
【问题描述】：

我的父页面上有一个组件，如下所示：

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>

如何将模板发送到组件？并渲染值（长度、宽度和高度）

类似于this，唯一不同的是，模板来自一个ajax调用。

【问题讨论】：

标签： vue.js

【解决方案1】：

经过一番挖掘，我找到了解决这个问题的方法，想法是将template 和props 作为对象传递给is 属性。

代码将如下所示，

<component 
 :is="description && { template: `<div>${description}</div>`, props: ['height', 'width', 'length'] }" 
 :height="overallheight" 
 :width="overallwidth" 
 :length="overalllength">
</component>

【讨论】：