vue 之插槽

昨天写代码有这么一行：

<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

posted on 2020-09-03 11:26 rainbowLover 阅读(597) 评论(0) 编辑收藏举报

vue 之 插槽

vue 之插槽