插槽---可以理解成占位符。方便组件功能的扩展。

 

一个 slot 标签就是一个插槽,如果没有内容传入,则显示 slot 标签原有的内容,如果有内容插入,则显示插入的内容。

vue的插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由父组件来决定。

匿名插槽(slot 不带 name 属性),看下面例子:

先在main.js定义一个组件my_slot:

Vue.component('my_slot', {template: '#test'})

其中,test元素在index.html当中定义:

<div id="app">......</div>
......
<template id="test">
    <div>
        <header>我是头部</header>
        <slot>我是中间</slot>
        <footer>我是尾部</footer>
    </div>
</template>

app.vue中使用:

<template>
<div id="app">
  <my_slot></my_slot>
</div>
</template>
<script>
.....
</script>
<style>
......
</style>

 效果为:

我是头部
我是中间
我是尾部

如果我们修改一下组件使用:

 <my_slot>
        <p>我是插入进来的</p>
    </my_slot>

效果是:

我是头部
我是插入进来的
我是尾部

可以看出,slot部分被替换了。

vue2 插槽和vue3插槽有点区别,vue3插槽用的是 v-slot指令?我们还是老式的写法 <template slot-scope="{ item }">

这里我们总结我们项目中的插槽使用:

1、element-ui的插槽(匿名、具名)

2、slot-scope

了解vue的同学都知道插槽分为单个插槽,具名插槽,还有作用域插槽,前两种比较简单,作用域插槽。

简单来说,前两种插槽的内容和样式皆由父组件决定,也就是说显示什么内容和怎样显示都由父组件决定;但是第三种插槽就不同了,作用域插槽的样式由父组件决定,内容却由子组件控制。简单来说:前两种插槽不能绑定数据,作用域插槽是一个带绑定数据的插槽。

element-ui插槽的例子代码:

              <el-input
                v-model="namen"
                clearable
                placeholder="" >
                <el-button slot="append" icon="el-icon-caret-bottom" @click="show()"/>
              </el-input>

这里就是使用了el-input的插槽。为input 增加了一个按钮。

我们项目中,主要用的是element-ui的插槽。

在打印模板中,我们也用到了插槽:

                                                                       (方框部分就是插槽方式实现的)

插槽的定义:

...... 
<div class="control-top">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      <slot name="title" />   //具名插槽
    </div>
    <div style="margin: 15px 0;" />
    <el-checkbox-group v-model="checkedTexts" class="check-list" @change="handleCheckedCitiesChange">
      <el-checkbox v-dragging="{item:item, list: templateData , group: groupCode }" v-for="(item,i) in templateData" :key="i" :label="item.text" class="check-item">{{ item.text }}
        <slot :item="item" />    //绑定数据的插槽  
      </el-checkbox>
    </el-checkbox-group>
......

插槽的使用(父组件):

......         
 <printItemControl v-if="employTemplateData" :template-data="employTemplateData.templatecontent.tableHead" class="print-table-control">
            <template slot="title">
              <div> | </div>
              <div>列宽 </div>
            </template>
            <template slot-scope="{ item }">
              |
              <el-input v-model="item.width" size="mini" type="text" class="width" />
            </template>
          </printItemControl>
......

 这里,slot-scope="{ item }"  可以理解为一个对象了,这个对象来自子组件。

ps:vue作用域插槽slot-scope详解

最简单易懂的 vue 插槽教程

Logo

前往低代码交流专区

更多推荐