(十九)插槽(默认插槽，具名插槽，插槽作用域)基础概念的分析和实现，呢一节只是简单分析，具体运用场景在(二十三)节做深入分析

1：当自定义一个组件的时候，将组件的某些部位作为传入内容的入口，可以在调用的时候灵活的传入想要的内容

2：在ant-design-vue或者vxe-grid里面的Table渲染里面大量的采用了插槽,把子组件的数据提供给父组件，然后父组件在根据值来做判断,通过数据值结果做不同数据结构的渲染，呢中就叫插槽作用域，

ant-design-vue的Table里面经常出现类似于呢中格式：<template #tags="{ text: tags }"> 的标签，#是v-slot:的简写，#号后面的tags就相当于子组件封装后的具名插槽名称，text: tags里面的tags 就相当于子组件提供的数据，呢里就用到插槽作用域，父组件根据子组件提供的数据结构传递对应的结构，实现效果就是：父组件传结构,子组件提供数据

3：ant-design-vue或者vxe-grid里面在Table列表做增删查改的时候要调用js,呢时候需要子组件通过作用域插槽提供id等数据到父组件，父组件在调用js的时候才能拿到对应的id等数据，做增删改等操作

 

下面是几个最基础的插槽原理分析例子:

1:最简单的插槽实现，如果确定子组件里面只有一个slot的时候可以这样写,

如果子组件里面有多个slot就会多个slot都会被替换成：<p>替换后的子组件内容</p>，呢样就有问题,

当子组件有多个slot的时候就要用到下面(2)的具名插槽，根据插槽名称和对应的templete进行一一指定

(1)父组件

<template>

<h1>插槽</h1>

<childbox>

    <p>替换后的子组件内容</p>

    </childbox>

</template>

import childbox from './child/onebox.vue'

components: {

  childbox

  },

(2)子组件

<template>

<div class="container">

子组件要被替换的内容:

<slot></slot>

</div>

</template>

在调用<childbox>组件的时候,子组件的slot插槽里面的内容就被替换成了<p>替换后的子组件内容</p>

 

2：具名插槽，子组件里面有多个slot插槽需要被替换的时候,根据slot名称进行替换

(1)父组件页面

<template>

<h1>具名插槽</h1>

<childbox>

    <template #header1>

    <p>headertemp</p>

  </template>

 <!-- <template v-slot:default>

   111

 </template> -->

<template #center>

    <p>centertemp</p>

</template>

  <template v-slot:footer1>

    <p>footertemp</p>

  </template>

</childbox>

</template>

import childbox from './child/childbox.vue'

  components: {

  childbox

  },

(2)子组件页面内容

<template>

<div class="container">

  <header>

    <slot name="header1"></slot>

  </header>

  <main>

    <slot name="center"></slot>

  </main>

  <footer>

    <slot name="footer1"></slot>

  </footer>

</div>

</template>

3：插槽作用域原理分析例子,后面的ant-design-vue Table里面做渲染的底层实现原理也是根据呢个来的(父组件传结构,子组件提供数据)

(1):父组件页面内容

<template>

<h1>ttt</h1>

<!-- <childbox>

    <template v-slot:default="propersdata">

    <span>{{propersdata.data.join(",")}}</span>

  </template>

</childbox> -->

<childbox>

<!--data就是子组件提供的数据,defalult代表子组件里面的slot没有指定名称的都是用这个template里面的内容  -->

    <template v-slot:default="{data}">

    <span>{{data.join(",")}}</span>

  </template>

</childbox>

<childbox>

<!--user就是子组件提供的数据,userslot就是子组件里面的slot的名称  -->

    <template v-slot:userslot="{user}">

   <td>{{user.id}}</td>

   <td>{{user.name}}</td>

   <td><input type="checkbox" :checked="user.check"></td>

  </template>

</childbox>

</template>

(2)子组件页面内容

<template>

<div class="container">

  <header>

<!-- data父组件根据这个名字来获取子组件的数据,做对于格式的渲染,这里没有指定插槽名称,父组件为v-slot:default的就template模版就会指向他 -->

    <slot :data="array"></slot>

  </header>

   <table>

     <tr v-for="item in list" :key="item.id">

<!-- user父组件根据这个名子来找到那个插槽,那个插槽根据插槽作用域把数据提供给父组件，父组件传入对应的结构做渲染 -->

    <slot :user="item" name="userslot"></slot>

     </tr>

   </table>

 

</div>

</template>

data() {

    return {

      array:["111","222","3334"],

     list:[

       {id:"1",name:"2",check:true},

       {id:"3",name:"4",check:false}

     ]

    };