runtime template in vuejs

在使用vuejs開發的過程中，有時候我們需要動態模板的場景，也就是說模板並不是靜態定義好的，而是動態變化的。

比如在做一個所見所得編輯器時，編輯人員可能時刻需要調整他設計的頁面內容，而如果頁面內容包含vue組件的話，這時如果需要實時預覽效果的話，就必須要解決動態模板如何實時編譯運行的問題。

我們知道v-html有點接近我們的需求，可是v-html僅僅能夠展示標准的html元素，不能包含vue組件的元素。

搜索了很多文章結合自己的探索，有兩個方式：

1. 直接使用vuejs的render函數

export default {
        props: [ 'tpl'],
        components: { VueCompA, VueCompB },
        created(){
            try{
                var res = Vue.compile(this.tpl,{}, this)
                this.$options.render = res.render
                this.$options.staticRenderFns = res.staticRenderFns
            }
            catch (err){
                console.log(err)
            }
        }
    };

這樣通過以下的調用即可:

<templatepreview :tpl="flyingTemplate"></templatepreview>

 

2.使用現成的模塊

參考v-https://github.com/alexjoverm/v-runtime-template-template

需要注意的是以上方案能夠工作的前提是Vue必須自帶compiler編譯器