例如要做一个类 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>
可能存在的问题
我们知道 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 本意是给 内联模板 使用。我们可以通过设置 this.$options._linkerCachable = false 达到我们的目的。
这样我们就可以开发让用户自定义布局的组件了，用户传入布局参数，通过手工拼接模板，设置了 _linkerCachable = false 也不会被缓存。
通过 $options.partials 动态添加 partial
使用 partials 也能达到添加自定义模板的目的，但是通常的做法是要全局注册 partial，这么做并不优雅。 vue-strap 就是这么做的。如果重名了会被覆盖（初次渲染不会，但是数据更新重新渲染 DOM 时就会被覆盖）。
通过文档我们知道可以在组件内部通过 partials 属性注册局部的 partial，因此自然而然也可以在 this.$options.partials 去动态添加了。
本小节我们将介绍 Vue 中如何动态绑定样式。包括 Class 的绑定、内联样式 Style 的绑定。掌握样式绑定的多种形式是其中的重点难点。同学们可以在学完本小节之后对样式的绑定方式加以总结，再通过反复的练习来加深印象。
通过v-bind指令给 DOM 元素动态绑定 Class 和 Style，一般用于根据不同数据状态切换元素样式的场景下。
我们可以通过数组和对象的两种形式绑定元素的 Class。
通过传给v-bind:class一个对象，以动态地切换 class：
代码解释： 上面的语法表示show这个 class 存在与否将取决于数据属性isShow是否为真值。
具体示例：
实例演示
"运行案例" 可查看在线运行效果
代码解释： HTML 代码第 2 行，我们给 p 绑定样式，当 isHide 为真值时， 其渲染结果为 ，否则 。 打开控制台，修改 vm.isHide 的值可以动态改变页面效果。
此外， v-bind:class指令也可以与普通的 class 属性共存。 语法：
当有如下模板:
和如下 data：
结果渲染为：
代码解释： 当isShow或者hasError变化时，class 列表将相应地更新。
例如，如果hasError的值为true ， isShow的值为true ，class 列表将变为"defaultClass show text-danger" 。
例如，如果hasError的值为true ， isShow的值为false ，class 列表将变为"defaultClass text-danger" 。
在之前介绍的案例中，我们将绑定的数据对象内联定义在模板里， 这样显得比较繁琐。其实，我们可以统一定义在一个 classObject 中：
实例演示
"运行案例" 可查看在线运行效果
结果渲染为：
代码解释： HTML 代码中，我们首先给 p 一个固定样式 defaultClass， 然后通过 classObject 给 p 绑定样式。 JS 代码 第 6-9 行，我们定义了数据 classObject，它有两个属性：1. 属性 show，值为 true，2. 属性 text-danger，值为 false。所以，最后页面渲染的效果是：
我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：
实例演示
"运行案例" 可查看在线运行效果
结果渲染为：
代码解释： HTML 代码中，我们通过 classObject 给 p 绑定样式。 JS 代码 第 6-11 行，我们定义了计算属性 classObject，它返回一个对象，该对象有两个属性：1. 属性 show，值为 true，2. 属性 text-danger，值为 false。所以，最后页面渲染的效果是：
我们可以把一个数组传给v-bind:class ，以应用一个 class 列表：
实例演示
运行案例点击 "运行案例" 可查看在线运行效果
渲染为：
代码解释： 在 HTML 代码中，我们通过数组给 p 绑定样式，数组中有 classA 和 classB 两个值。 在 JS 代码第 6-7 行定义了 classA 和 classB 两个字符串，它的格式和元素 class 的格式相同，不同的样式类之间以空格相隔。
如果你也想根据条件切换列表中的 class，可以用三元表达式：
这样写将始终添加classB的样式，但是只有在isShow为真时才添加showClass 。
不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象的形式来表达数组中的某一项：
代码解释： 在 HTML 中，p 绑定一个样式数组，数组第一项是一个对象表达式 { showClass: isShow }。当 isShow 为 true 时样式最终绑定为： ；当 isShow 为 false 时样式最终绑定为： ；
和 Class 的绑定一样，Style 的绑定同样可以通过数组和对象的两种形式。
v-bind:style的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：
实例演示
"运行案例" 可查看在线运行效果
渲染为：
代码解释： 在 HTML 代码中，我们给 p 绑定 background-color 和 width 两个内联样式，它们的值在 data 中定义。
在模板中写较为复杂的表达式语法显得比较繁琐，通常直接绑定到一个样式对象更好，这会让模板显得更加清晰：
实例演示
"运行案例" 可查看在线运行效果
渲染为：
代码解释： 在 HTML 代码中，我们给 p 绑定数据 styleObject，它们的值在 data 中定义。
v-bind:style的数组语法可以将多个样式对象应用到同一个元素上：
实例演示
"运行案例" 可查看在线运行效果
渲染为：
本小节我们学习了如何通过 v-bind 来动态绑定样式。主要有以下知识点：
```
<div v-for="(item, index) intemp.templateValue" :key="index">
<el-form-item v-if="0===index" :label="$t('模板内容值')" :prop="item" :rules="{required: true,message: `${item}不能为空`,trigger: 'blur'}" required>
<el-input v-model="temp[item]" :placeholder = "`请输入${item}内容`" type="text" style="width: 300pxdisplay: block"/>
<el-form-item v-else :prop="item" :rules="{required: true,message: `${item}内容不能为空`,trigger: 'blur'}" required>
<el-input v-model="temp[item]" :placeholder = "`请输入${item}内容`" :rules="{required: true,message: `${item}不能为空`,trigger: 'blur'}" type="text" style="width: 300pxdisplay: block"/>
</div>
```
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）