vue slot

1. 语法更新说明
   1. 从2.6.0开始使用新语法
   2. 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
2. 默认slot
   1. 实例
      1. 父组件
         • <zujian>我是插槽</zujian>
      子组件内部
      • <div><slot></slot></div>
      2. 结果

<div>我是插槽</div>

1. 具名slot：（注意：1 v-slot 只能添加在 <template>  2   即把参数之前的所有内容 (v-slot:) 替换为字符 #     v-slot:header 可以被重写为 #header：）
   1. 父组件
      • <zujian>
      • <slot name='header'></slot>
      • <slot name='footer'></slot>
      • </zujian>
   2. 子组件内部
      • <div>
        • <template v-slot:header><div >我是头部</div></template>
      • <template v-slot:footer><div >我是底部</div> </template>
      • </div>
   3. 结果

<div>

 <div >我是头部</div>

<div >我是底部</div>

</div>

 

        2作用域slot   解决：父组件slot里面的内容想要访问子组件提供的数据

1. 父组件
   1. <current-user> <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template> </current-user>
2. 子组件
   • <span> <slot v-bind:user="user"></slot> </span>
3. 结果