vue 插槽

1. 具名插槽

具名插槽主要使用步骤
 - vue2.0版本
1. 给某组件中的slot标签添加 name="a" 代表叫a的插槽  默认名字为default 
2. 在使用组件的时候，填充插槽内容 使用slot="a" 代表向a插槽填充内容
- vue3.0版本
3. 给组件中的slot标签添加 name="a" 代表叫a的插槽  默认名字为default 
4. 在使用组件的时候，填充插槽内容 使用v-slot：a 代表向a插槽填充内容
官方的代码示例如下：

<div class="container">
  <header>
    <!-- 我们希望把页头放这里 -->
  </header>
  <main>
    <!-- 我们希望把主要内容放这里 -->
  </main>
  <footer>
    <!-- 我们希望把页脚放这里 -->
  </footer>
</div>

这是我们的父组件 暂时叫做baseLayout 如果想吧指定内容填充到指定区域 需要使用插槽

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

像这样指定了slot的名字
接着在使用baselayout组件的时候，填充自己的内容

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

外面必须包裹一个template 在template上使用v-slot来指定插槽的名字 这样可以按照指定的位置来显示了

2. 作用域插槽

使用场景： 假设我们现在有一个组件current user

<span>
  <slot>{{ user.lastName }}</slot>
</span>

当前组件中有一个user数据 我们吧这个数据内容当作默认内容 当我们需要修改的时候应该这样调用

<current-user>
  {{ user.firstName }}
</current-user>

这个时候就会出错， 因为我们当前的父组件里面 没有user这个数据 user这个数据只能在current-user这个组件中使用 这里就要用到作用域插槽了

我们将user数据作为  插槽的一个属性绑定上去 然后通过插槽的这个属性来拿到数据
<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

使用v-slot：default=“slotprops” 表示名字叫default的插槽 作用域i叫slotprops 这样可以通过slotprops 来拿到子组件的数据 vue2.0使用 slot-scope=”slotprops “来命名

最后一些封装好的组件 比如 el-tree el-form table表格 选择器 级联器可以直接在组件里面使用作用域插槽来拿这个组件的数据

 <el-tree :data="departs" :props="defaultProps" :default-expand-all="true">
          <!-- 说明el-tree里面的这个内容 就是插槽内容 => 填坑内容  => 有多少个节点循环多少次 -->
          <!-- scope-scope 是 tree组件传给每个节点的插槽的内容的数据 -->
          <!-- 顺序一定是 执行slot-scope的赋值 才去执行 props的传值 -->
          <tree-tools slot-scope="obj" :tree-node="obj.data" @delDepts="getDepartments" />
        </el-tree>

tree-tools是自定义的组件 如果想拿到el-tree的data数据 使用作用域插槽

我又来了 之前一直不明白为啥这里的作用域插槽放在了el-tree里面，按照我的理解作用域插槽应该是为了拿子组件的数据，为什么我不定义在el-tree上，这里因为el-tree是一个树，循环渲染的，相当于v-for 每一层都有一个slot插槽，所以放到el-trree里面，可以为每一层树结构去填补数据，使用作用域插槽 拿到当前这层树的数据 el-tree的data是一个Array 而obj.data是一个对象 两者不一样

一起加油~~