vue 怎么渲染自定义组件

Question

代码如下图 :

cbutton为自定义组件,1情况正常无问题 , 2情况使用v-html只能渲染原生组件.
2要求动态输出，这种情况需要使用render解决吗?jsx呢?
并没有使用过render函数,求大神帮忙

Answer 1

官方文档明确说过、v-html只能渲染纯html

第一种方法都写出来了、你套个template直接遍历节点不就好了么

<template v-for="e in arr">
    <cbutton :type="e.type" :msg="e.msg">
</template>

Answer 2

我也遇到这个问题，我想你的问题应该是和我一样的，字符串怎么渲染成dom

我的解决方案是先用Vue.extend(template: xx)将字符串转换成模板，然后用render函数去渲染

定义一个自定义组件，用于处理string渲染成正常页面
`
import Vue from 'vue'
export default {

name: 'preview',
props: {
    code: {
        required: true
    }
},
render (h) {
    // 这里是关键，将string字符串转换成模板
    // 难点是String中包含了自定义组件，使用v-html是解析不了的
    const result = Vue.extend({
        template: this.code
    })
    return h(result, {})
}

}
`
在主页面中直接调用这个组件

`
<Preview :code="code"></Preview>
`

希望能够帮助到你