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>