详解Vue动态添加模板的几种方法_vue动态template,vue动态模板 - CSDN文库

vue动态添加模板

动态添加模板

113 浏览量更新于2023-03-16 评论收藏 73KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

详解详解Vue 动态添加模板的几种方法动态添加模板的几种方法

本篇文章主要介绍了详解Vue 动态添加模板的几种方法，小编觉得挺不错的，现在分享给大家，也给大家做个

参考。一起跟随小编过来看看吧

以下方法只适用于 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.template

this.$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>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论1

流浪Earth

2021-11-09

把人家的网址转成PDF发表一下，你的良心不会疼么

weixin_38655987

粉丝: 8
资源: 933

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈