以下方法只適用于 Vue1.0 版本，推薦系數由高到低排列。

通常我們會在組件里的 template 屬性定義模板，或者是在 *.vue 文件里的 template 標簽里寫模板。但是有時候會需要動態生成模板的需求，例如讓用戶自定義組件模板，或者設置組件的布局。

例如要做一個類 select 的組件，用戶傳入 options 數據，通過 value prop 獲取選中值，最基本的原型如下。

Vue.component('XSelect', { template: ` <div class="select"> <input :value="value" readonly /> <div class="option" v-for="option in options" @click="value = option.value"> <span v-text="option.label"></span> </div> </div>`, props: ['value','options']})

如果此時需要增加一個 API 支持讓用戶自定義 option 部分的模板。此處用 slot 并不能解決問題。

通過 $options.template 修改

通過打印組件對象可以獲得一個信息，在 $options 里定義了一個 template 屬性，寫在 template 標簽里的模板，最終編譯后也會在 $options.template 里。通過文檔的生命周期 可以得知，在 created 的時候， 實例已經結束解析選項， 但是還沒有開始 DOM 編譯 也就是說，如果用戶通過 prop 的數據我們可以獲得，但是模板其實還沒有渲染成 DOM。經過測試，在 created 修改 this.$options.template 是可以改變最終生成的 DOM 的，同時也能拿到 props 的內容。

那么我們可以修改下代碼，使其支持自定義模板

Vue.component('XSelect', { props: ['value','options', { name: 'template',default:'<span v-text="option.label"></span>' } ], created() {varoptionTpl =this.templatethis.$options.template =` <div class="select"> <input :value="value" readonly /> <div class="option" v-for="option in options" @click="value = option.value">${optionTpl} </div> </div>` }})

用戶使用是就可以傳入模板了

<x-select:value.sync="value"template="<span>標簽: {{ option.label }}, 值: {{ option.value }}</span>":options="[ {value: 1, label: 'a'}, {value: 2, label: 'b'}, {value: 3, label: 'c'} ]"></x-select>

可能存在的問題

我們知道 Vue 在內部幫我們做了許多優化，但是在這里可能會由于某些優化導致動態拼接的模板無法渲染成功。例如這里我們不使用 v-for 而是手工遍歷 options 生成需要的 HTML

consttpl = options.map(opt =>`<div>${this.optionTpl}</div>`)this.$options.template =` <div class="select"> <input :value="value" readonly>${tpl} </div>`

這里會導致一個 BUG，如果一個頁面有多個 x-select 組件，并且 options 長度不一樣，會導致長的 options 的組件后面幾個選項渲染不出來。究其原因是 Vue 會幫我們緩存模板編譯結果。翻看代碼可以找到 vue/src/instance/internal/lifecycle.js 里有做優化，同時提供的 _linkerCachable 本意是給 內聯模板 使用。我們可以通過設置