昨天写代码有这么一行：
<van-field name="checkbox" label="复选框"> <template #input> <van-checkbox v-model="checkbox" shape="square" /> </template> </van-field>
我是直接从vant文档示例上拷贝下来的，今天review时候，被问到这个template上加一个#input是什么意思？问的我一脸懵逼，没见过呀，哎呀！
我什么时候也变成自己写的代码自己不知道咋回事的人了！
网上查也没有查到，然后以为是vant写法？就把vant源码clone下来开始看，看到这里：
感觉和slot有关吧，然后demo里有这样的代码：
<template> <demo-block :title="t('insertButton')"> <van-field v-model="sms" center clearable :label="t('sms')" :placeholder="t('smsPlaceholder')" > <template #button> <van-button size="small" type="primary"> {{ t('sendSMS') }}--- </van-button> </template> </van-field> </demo-block> </template>
然后看组件里：
// render 里边 return ( <Cell icon={this.leftIcon} size={this.size} center={this.center} border={this.border} isLink={this.isLink} required={this.required} clickable={this.clickable} titleStyle={this.labelStyle} valueClass={bem('value')} titleClass={[bem('label', labelAlign), this.labelClass]} scopedSlots={scopedSlots} arrowDirection={this.arrowDirection} class={bem({ error: this.showError, disabled: this.disabled, [`label-${labelAlign}`]: labelAlign, 'min-height': this.type === 'textarea' && !this.autosize, })} onClick={this.onClick} > <div class={bem('body')}> {this.genInput()} {this.showClear && ( <Icon name="clear" class={bem('clear')} onTouchstart={this.onClear} /> )} {this.genRightIcon()} {slots('button') && ( <div class={bem('button')}>{slots('button')}</div> )} </div> {this.genWordLimit()} {this.genMessage()} </Cell> );
意思就是你给你留个名字叫button的插槽；
但不自信的我还是在群里问了一下，人家立马就回答了说：
插槽，不知道？
插槽的简写
卧槽，被嘲讽了，但也证实了我的猜想。
写个demo操练一下吧，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>插槽</title> <style> .first{ background-color: #fff008; } .second{ background-color: #7a6ee2; } .san{ background-color: #776673; } .si{ background-color: #b62846; } .fifth{ background-color: #352e28; } </style> </head> <body> <div id="app"> <header><h2>插槽用法</h2></header> <hello> <template> // 进入默认插槽 <div>wo shi lao si</div> </template> <template v-slot:laoer> // 进入插槽名字交laoer的插槽， <div>wo shi lao er</div> </template> <template #laosan> // 进入名字叫laosan的插槽 <div>wo shi lao san</div> </template> <div v-slot:laowu>wo shi lao wu</div>// 这种写法报错，因为插槽只能写在template上或者组件上 </hello> </div> <script src="../../js/vue.js"></script> <script> Vue.component('hello',{ data() { return { msg:'hello' } }, template:` <div class="parent"> <p class="first">{{msg}}</p> <p class="second"><slot name="laoer"></slot></p>// 插槽 <p class="san"><slot name="laosan"></slot></p>// 插槽 <p class="si"><slot></slot></p>// 默认插槽 <p class="fifth"><slot name="laowu"></slot></p>//插槽 </div> ` }); const vm = new Vue({ el:'#app', data:{ msg:"world" } }) </script> </body> </html>
vue官网有更详细说明
over