Vue插槽slot：默认插槽、具名插槽、作用域插槽

插槽

1.什么插槽
插槽也成为内容分发 用slot这个内置组件
2.插槽是干什么的
在子组件中来显示父组件中的数据
3.插槽怎么用
4.在子组件中用括起来一个区域
5.在父组件的子组件标签中给插槽传递数据，如果父组件不传输数据那6.么直接显示标签中的数据
7.插槽的分类
插槽可以分为三类 默认插槽 具名插槽 作用域插槽
默认插槽
只要有位置 就会显示父组件传递来的数据
具名插槽
给slot标签起名 然后在父组件传递数据的时候根据名字查找就行

示例：子组件

<template>
<div>
     <h2>
         <slot name="one">
             这个我子组件预留出来的位置
             {{title}}
         </slot>
     </h2>
    <p>我的内容</p>
    <section>
        插槽的内容
        <slot name="two"></slot>
    </section>
</div>
</template>
<script>
export default {
    data(){
        return{
            title:'谁'
        }
    }
}
</script>

父组件

<template>
  <div id="app">
    <!-- 学生列表 -->
    <List>
      <template v-slot:one>
        <p>这是我的学生数据</p>
        <h3>{{name}}</h3>
      </template>
      <template>
        这是列表的标题呢
      </template>
    </List>
    <!-- 教室列表 -->
    <List></List>
  </div>
</template>
<script>
import List from "@/components/List"
export default {
  components:{List} ,
  data(){
    return{
      name:"hello"
    }
  }
}
</script>
<style></style>

作用域插槽
1.在子组件中给slot绑定一个属性 挂载要传输的变量 :属性名=“变量”

2.在父组件中通过 v-slot:名=“suibian”

3.suibian.属性名来访问子组件传过来的数据

示例：子组件

<template>
<div>
     <h2>
         <slot name="one" :objuser="obj">
             {{obj.firstname}}
         </slot>
     </h2>
    <p>我的内容</p>
    <section>
        插槽的内容
        <slot name="two" :stuobj="stu"></slot>
    </section>
</div>
</template>
<script>
export default {
    data(){
        return{
            obj:{firstname:"张",lastname:"三"},
            stu:{username:'张三',age:20}
        }
    }
}
</script>

父组件

<template>
  <div id="app">
    <!-- 学生列表 -->
    <List>
      <template v-slot:one="suibian">
        <p>这是我的学生数据</p>
        <h3>{{suibian.objuser.lastname}}</h3>
      </template>
      <template v-slot:two="suibian">
        {{suibian.stuobj.age}}
      </template>
    </List>
    <!-- 教室列表 -->
    <List></List>
  </div>
</template>
<script>
import List from "@/components/List"
export default {
  components:{List} ,
  data(){
    return{
      name:"hello"
    }
  }
}
</script>
<style></style>