VueJS组件如何渲染Ajax获取的动态模板并绑定属性值？

看起来你想实现的是从后端获取Vue模板字符串，然后在子组件里渲染它，同时把父组件的height/width/length值注入到模板的插值中。这里的核心问题是动态编译字符串模板，因为Vue默认不会直接解析字符串形式的模板，而且你需要把Props和模板里的插值关联起来。

下面是具体的实现步骤和代码修改：

1. 调整父组件（Detail.vue） #

首先确保你获取到的模板和维度数据都是响应式的，并且把维度数据一起传递给子组件：

<template>
  <!-- 把模板字符串和维度数据都传给FeatureList组件 -->
  <feature-list 
    :description="description" 
    :dimensions="{ height, width, length }"
  ></feature-list>
</template>

<script>
import axios from 'axios'
import FeatureList from './FeatureList.vue'

export default {
  components: { FeatureList },
  data() {
    return {
      description: '',
      height: 0,
      width: 0,
      length: 0
    }
  },
  mounted() {
    axios.get('my/end/point')
      .then(res => {
        const product = res.data.product
        this.description = product.description
        // 假设接口返回维度数据，根据实际情况调整
        this.height = product.height
        this.width = product.width
        this.length = product.length
      })
      .catch(error => {
        console.log('error', error)
      })
  }
}
</script>

2. 修改子组件（FeatureList.vue，原Features.vue） #

这里的关键是使用Vue.compile把字符串模板编译成Vue可以识别的渲染函数，然后创建动态组件来渲染它，并绑定Props：

<template>
  <!-- 使用动态组件渲染编译后的模板 -->
  <component :is="dynamicTemplateComponent" v-bind="dimensions"></component>
</template>

<script>
export default {
  props: {
    // 从父组件传入的模板字符串
    description: {
      type: String,
      required: true
    },
    // 维度数据对象，包含height/width/length
    dimensions: {
      type: Object,
      required: true,
      validator: val => ['height', 'width', 'length'].every(key => key in val)
    }
  },
  computed: {
    dynamicTemplateComponent() {
      // 编译字符串模板，生成render函数和静态渲染函数
      const { render, staticRenderFns } = Vue.compile(this.description)
      
      // 返回动态组件的选项：指定渲染函数、静态渲染函数，以及需要接收的Props
      return {
        render,
        staticRenderFns,
        props: ['height', 'width', 'length']
      }
    }
  }
}
</script>

3. 关键注意事项 #

• Vue版本配置：如果你的项目使用的是Vue CLI创建的runtime-only版本，需要在vue.config.js中开启runtimeCompiler：

  module.exports = {
    runtimeCompiler: true
  }
  

  这样才能使用Vue.compile功能。
• 模板合法性：确保后端返回的模板字符串是合法的Vue模板，比如你的示例中用到了Element UI的el-row/el-col，需要确保这些组件已经全局注册（比如在main.js中导入并注册），否则动态组件无法识别它们。
• Props匹配：模板里的插值（比如{{length}}）要和你传入的Props名称完全一致，这样Vue才能正确绑定对应的值。

这样修改后，当父组件从接口获取到模板和维度数据后，子组件会自动编译模板并渲染出带有动态维度值的内容，和你想要的示例效果一致，只是模板来源换成了Ajax请求。

内容的提问来源于stack exchange，提问作者asdasdasdasdqwe