vue+element UI 学习总结笔记（四）_ 插槽

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

 

一个 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 插槽教程