插槽

默认插槽

如果不确定组件中的ui结构。需要让用户来确定的话，就可以使用插槽slot，在调用的子组件标签中，写入内容，可以把这个内容渲染到子组件中去，需要在子组件中定义slot这个标签

在调用的子组件标签里面写的内容就会替换到子组件slot这个标签是，并在子组件中渲染出来

//需要渲染的Vue组件
<template>
  <div class="left-container">
    <slot>这是默认值，当组件没有指定内容时我会出现</slot>  //不确定内容，等待用户进行填充
  </div>
</template>

 <Left>
      asd  //渲染的内容
    </Left>

具名插槽

Vue官方规定，每个slot插槽都有一个name名称
如果省略了slot的name名称，则有一个默认的名称是default
默认情况下，在使用组件时，提供的内容都会被填充到名字为default的插槽中
如果想把内容填充到指定的插槽中的话，需要用到v-slot这个指令

a) V-slot这个指令只能用在组件上或者template上，不能直接用在元素上

b) V-slot:插槽名使用语法

c) Template这个标签是一个虚拟的标签，只起到包裹性质的作用，但是，不会渲染为任何实质性的html元素

d) V-slot：的简写是#

作用域插槽

 a) 在封装组件时，为<slot>提供属性对应的值，这种用法叫做作用域插槽

b) 在父组件中使用时，可以使用#插槽名=”obj”来接收在声明slot时，提供的属性值，obj是一个对象，这个对象里面的数据就是属性名：属性值

 c) 在使用作用域插槽的时候，还可以直接用解构赋值，将需要用到的数据直接结构出来

<template>
<div class="left-container">
   //给插槽定义一个属性  名叫games  传递一个值  值就是games  只不过这个值是一个数组
 <slot :games="games">这是默认值，当组件没有指定内容时我会出现</slot>
</div>
</template>

<Left>
 //如果想使用作用域插槽必须是给template添加一个scope属性  值的名字可以随便起，
 //这是值是一个对象，这个对象里面有atguigu，atguigu也是对象  atguigu里面的有一个属性叫做games，games就是传递过来的数据
 //解构赋值 直接将这个传递过来的值里面的games解构出来
 //  <template scope="{games}">
 //另外一种写法
 //  <template slot-scope="atguigu">
   <template scope="atguigu">
     <div>
       {{ { ...atguigu } }}
     </div>
   </template>
 </Left>