javascript - vue 拼接出來的元件有什麼方法可以讓元件生效嘛

Question

專案中用到element-ui, 比如說我要動態產生N個元件。
<template>

<p class="search" ref="search" v-html="sHtml">

</p>

</template>

#<script type="text/javascript">

export default {
    data() {
        return {
            sHtml: '',
        }
    },
    props: {
        con: {
            type: Array
        }
    },
    created() {
        this.con.map((v, i) => {
            this.sHtml += '<el-'+ v.type +' class="'+ v.style +'" placeholder="'+ v.placeholder +'" v-model="'+ v.name +'"></el-' + v.type +'>';
        });
    },
}

</script>

有什麼辦法可以讓element外掛渲染出在頁面中呢？

Answer 1

直接在引用組件的地方v-for不行。 。

Answer 2

直接一點不行嗎,例如

    
 
 <p class="search" ref="search">
     <el-input  v-model="keyFrom.id" size="small" placeholder="请输入内容"></el-input>
 </p>

Answer 3

現在不支援編譯html了,1.0的時候可以

Answer 4

直接使用v-for，透過資料【array】渲染元件

Answer 5

可以參考:https://cn.vuejs.org/v2/guide...動態組件

<component v-for="item in con" :is="item.name"></component>