以下方法只适用于 Vue1.0 版本,推荐系数由高到低排列。
通常我们会在组件里的 template 属性定义模板,或者是在*.vue文件里的 template 标签里写模板。但是有时候会需要动态生成模板的需求,例如让用户自定义组件模板,或者设置组件的布局。
例如要做一个类 select 的组件,用户传入 options 数据,通过 value prop 获取选中值,最基本的原型如下。
Vue.component('XSelect', {
template: `
class="option"
v-for="option in options"
@click="value = option.value">
props: ['value','options']
})
如果此时需要增加一个 API 支持让用户自定义 option 部分的模板。此处用 slot 并不能解决问题。
通过 $options.template 修改
通过打印组件对象可以获得一个信息,在 $options里定义了一个 template 属性,写在 template 标签里的模板,最终编译后也会在 $options.template 里。通过文档的生命周期 可以得知,在 created 的时候, 实例已经结束解析选项, 但是还没有开始 DOM 编译 也就是说,如果用户通过 prop 的数据我们可以获得,但是模板其实还没有渲染成