Vue插槽，具名插槽，作用域插槽详解

1.封装头部组件

<template>
  <div class="head_container">
    <slot name="left"></slot>
    <div>
      <span>{{ title }}</span>
    </div>
    <slot name="right"></slot>
  </div>
</template>
export default {
  name: "homeTop",
  //定义props的title属性
  props: {
    title: String,
  },
}

2.在main.js中全局导出组件

import HeadTop from './views/HeadTop.vue'
Vue.component('HeadTop', HeadTop)

3.当你要使用组件的时候 如果只要中间的title ，那么solt插槽就不要使用

    <HeadTop title="我的">HeadTop>

3.如果左右两边都需要加东西，那么就使用插槽，因为在之前定义了插槽的名字，所以调用的时候需要指定插槽的name，判断你是加在哪里

    <HeadTop :title="address.name">
      <div class="icon" slot="left">
        <i class="el-icon-search">i>
      div>
      <div class="login" slot="right" @click="goToLogin">
        <span>登录span>/
        <span>注册span>
      div>
    HeadTop>

4.如果你有很多标签，那不可能每一个都用一个插槽，但是你如果你直接包括一个div标签，那整个dom结构就莫名其妙多了一层div，这个时间怎么办呢，解决方法如下

//给一个template标签包括
<List :lists="flims" title="电影">
  
    
  <template v-slot:center>
    <ul>
      <li>123li>
      <li>213213li>
      <li>123213li>
    ul>
    <h1>哈哈h1>
  template>
List>

5.作用域插槽

使用场景：数据在子组件内部，现在需要的父组件引用，现在的问题是 父组件拿不到子组件的数据，但是又需要从父组件通过插槽传递数据

这个时候就需要用到作用域插槽

    <tbody>
      <!-- 循环渲染表格数据 -->
      <tr v-for="item in list" :key="item.id">
          //name为插槽姓名,具名传递 :user="item" 这里的item 是list里面每一项的值 
          //:user 需要与app组件里面接受的值相同
        <slot name="table" :user="item"></slot>
      </tr>
    </tbody>

export default {
  name: 'MyTable',
  data() {
    return {
      // 列表的数据
      list: [
        { id: 1, name: '张三', state: true },
        { id: 2, name: '李四', state: false },
        { id: 3, name: '赵六', state: false },
      ],
    }
  },
}

在app.js中引入

//定义一个template标签 #table为对应名称 {user}是解构赋值，直接user.调用 且需要与上方插槽动态传值的名称一致
<template #table="{ user }">
        <td>{{ user.id }}td>
        <td>{{ user.name }}td>
        <td>
          <input type="checkbox" :checked="user.state" />
        td>
      template>