vue 修改模板{{}}标签_详解Vue 动态添加模板的几种方法
以下方法只适用于 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 的数据我们可以获得,但是模板其实还没有渲染成 DOM。经过测试,在 created 修改this.$options.template是可以改变最终生成的 DOM 的,同时也能拿到 props 的内容。
那么我们可以修改下代码,使其支持自定义模板
Vue.component('XSelect', {
props: [
'value',
'options',
{
name: 'template',
default:''
}
],
created() {
varoptionTpl =this.template
this.$options.template =`
class="option"
v-for="option in options"
@click="value = option.value">
${optionTpl}
`
}
})
用户使用是就可以传入模板了
:value.sync="value"
template="标签: {{ option.label }}, 值: {{ option.value }}"
:options="[
{value: 1, label: 'a'},
{value: 2, label: 'b'},
{value: 3, label: 'c'}
]">
可能存在的问题
我们知道 Vue 在内部帮我们做了许多优化,但是在这里可能会由于某些优化导致动态拼接的模板无法渲染成功。例如这里我们不使用 v-for 而是手工遍历 options 生成需要的 HTML
consttpl = options.map(opt =>`
`)
this.$options.template =`
${tpl}
`
这里会导致一个 BUG,如果一个页面有多个 x-select 组件,并且 options 长度不一样,会导致长的 options 的组件后面几个选项渲染不出来。究其原因是 Vue 会帮我们缓存模板编译结果。翻看代码可以找到 vue/src/instance/internal/lifecycle.js 里有做优化,同时提供的 _linkerCachable 本意是给 内联模板 使用。我们可以通过设置this.$options._linkerCachable = false达到我们的目的。
这样我们就可以开发让用户自定义布局的组件了,用户传入布局参数,通过手工拼接模板,设置了_linkerCachable = false也不会被缓存。
通过 $options.partials 动态添加 partial
使用 partials 也能达到添加自定义模板的目的,但是通常的做法是要全局注册 partial,这么做并不优雅。 vue-strap 就是这么做的。如果重名了会被覆盖(初次渲染不会,但是数据更新重新渲染 DOM 时就会被覆盖)。
通过文档我们知道可以在组件内部通过 partials 属性注册局部的 partial,因此自然而然也可以在 this.$options.partials 去动态添加了。
Vue.component('XSelect', {
template: `
class="option"
v-for="option in options"
@click="value = option.value">
`,
props: ['template','value','options'],
partials: {
option: ''
},
created() {
if(this.template) {
this.$options.partials.option =this.template
}
}
})
用 interpolate 渲染模板
这种方式就略显蛋疼,而且效率最差。 interpolate 也是我最开始做动态渲染模板想到的方式,不推荐使用。
Vue.component('XSelect', {
template: `
class="option"
v-for="option in options"
@click="value = option.value"
v-html="renderOption(option)">
`,
props: [
'value',
'options',
{
name: 'template',
default:''
}
],
methods: {
renderOption(option) {
this.option = option
returnthis.$interpolate(this.template)
}
}
})
Vue2.0
目前并没有找到合适的解决方案。2.0 的 Vue 将 compile 工作提前,并且 compiler 也是单独一个包(除非你直接引用的是 vue.js 文件,包含 compiler 和 runtime,那么第一种方法是适用的),那么并不能动态的生成模板。除非用户传入的是 render 能识别的 DOM tree。
按照这样的思路,其实可以让用户传入的模板预先编译好,传入到组件内,拼接 DOM tree 看起来也能解决问题。那么可以这么玩。
看看就好, 性能太渣
首先要安装 Vue JSX 的 相关插件
组件
Vue.component({
name: 'XSelect',
render(h) {
// 这里获得的 this.template 其实是一个函数,调用该函数返回 DOM
// 因此这里的关键代码是拼接一个新的函数,接受 `option` 参数以及上下文
// 使用 new Function 创建一个新函数
return(
{
this.options.map(option =>
on-click={() => this.$emit('input', option.value) }
class="option">
{ new Function('option', 'return ' + this.template)(option)(h) }
)
}
)
vue 修改模板{{}}标签_详解Vue 动态添加模板的几种方法相关推荐
- dom不刷新 vue 加数据后_详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结...
如果你发现你自己需要在 vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事. 1. vue 无法检测实例被创建时不存在于 data 中的 property 原因:由于 vue 会在初 ...
- vue连接后端本地接口_详解vue配置后台接口方式
详解vue配置后台接口方式 在vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录 第一种(代理方式) 在工程目录下 > config > index.js - 修改为如下配置 ...
- vue调用手机相机相册_详解Vue调用手机相机和相册以及上传
组件 选中{{imgList.length}}张文件,共{{bytesToSize(this.size)}} javaScript代码 export default { name: "cam ...
- vue调用手机相机相册_详解Vue.js调用手机相机和相册以及上传
详解Vue.js调用手机相机和相册以及上传 发布于 2020-7-7| 复制链接 摘记: 组件 ```xhtml .. 组件 ```xhtml --> 选中{{imgList.length}}张 ...
- vue 变量定义 对象_详解Vue 全局变量,局部变量
局组件和局部组件 1.先定义组件 Vue.component('组件名', { 组件模板对象 }) 注意: 组件名不要使用原生的标签名, 若组件名定义时用的是驼峰命名法, 则调用时用中划线分割后小 ...
- oclick vue 传参 函数_详解Vue计算属性和侦听属性
关注[搜狐技术产品]公众号,第一时间获取技术干货 作者介绍: 本期特邀作者:浪里行舟 Github博客2600 star作者,专注于前端领域.个人公众号:「前端工匠」,致力于打造适合初中级工程师能够快 ...
- vue底部跳转_详解Vue底部导航栏组件
不多说直接上代码 BottomNav.vue: {{item.name}} export default{ props:['idx'], data(){ return { items:[{ cls:& ...
- vue warning如何去掉_详解 vue 组件三大核心概念
前言 本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛戳 ...
- vue传递数组对象_详解vue组件三大核心概念
前言 本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛 ...
最新文章
- 学习html5系列之比较典型的div滥用
- Cell子刊:人类微生物组参考基因集中的单体基因
- Sublime text3 新建 HTML文件
- 7/100. Move Zeroes
- AUTOSAR协议解析篇(一)-J1939协议解析
- Ubuntu系统显卡驱动、CUDA、CUDNN安装(二CUDA和CUDNN)
- Android MediaRecorder调用AudioRecord流程
- BIND9源码分析奠基
- 分享最新36款高质量免费英文字体
- 阿里云服务器Centos7 安装 pycuda报错:Could not build wheels for pycuda which use PEP 517 and cannot be install
- 大华平台linux密码忘记,大华乐橙sn1(海思hi3798c)刷机
- 虚拟机linux快捷键,虚拟机控制与Linux快捷键
- 再次回归 IDEA 的部分修改记录...
- yum安装软件报错:Invalid configuration value: failovermethod=priority...
- APP如何上架App Store?
- sl4a库_SL4A客户端Python服务器(SL4A client Python server)
- Android中如何实现多个框,android几种不同对话框的实现方式
- 据说99%的程序猿都不懂得这样表白
- eclipse新建类auther自填充
- CentOS7 中 Docker-ce 安装配置 MyCat-Web 监控 MyCat状态
热门文章
- 水文特点是什么意思_一级建造师是什么意思?一级建造师报考指南
- 大厂面试喜欢考算法,该怎么破?
- 面试:Redis新版本开始引入多线程,谈谈你的看法?
- 还在封装各种 Util 工具类?这个神级框架帮你解决所有问题!
- 每日一皮:开会不关微信的尴尬(2)
- 面试 | MySQL InnoDB一棵B+树可以存放多少行数据?
- 简单的 HTTP 调用,为什么时延这么大?
- 即墨php,即墨php培训
- win10系统由于服务器出错翻译失败,win10系统下谷歌浏览器翻译失败如何解决
- 计科系大一c语言期末考试题,大一大学计算机基础期末考试试题「附答案」