v-slot 基本用法

简单理解

插槽就是子组件提供给父组件使用的一个占位符，用标签slot 表示。父组件在这个占位符里去填充组件模板，填充的内容会替换子组件。

默认插槽

简而言之就是没有名字的插槽，子组件未定义的名字的，父组件会把位指定名字的插槽填充到默认插槽中。

<div class="header">
	<slot></slot>
</div>

<header>
	<p>这里是匿名插槽</p>
</header>

具名插槽

可以简单理解为带名字的插槽

<div class="container">
	<slot name="header"></slot>
</div>

<template v-slot:header >
	<p>这里就是插槽的替代内容</p>
<template >

作用域插槽

作用域插槽的主要作用是在书写插槽内容时可以获取到插槽作用域的值。

<div class="container">
	<slot :data="data"></slot>
</div>

<template v-slot:default="title">
	<span>{{title.data}}</span>
</template >

总结

slot 和组件是一个道理，是对组件的一个扩展，应用场景更加广泛。可能有些同学会说之前我用作用于插槽还是首先在子组件中使用 :data = data 来传递 data的值，父组件通过slot - scope获取属性值的，怎么现在没有了。先说明一下，这是一个伤心的故事，这种传值方式已经被废弃，毕竟，大人，时代已经变了。