Vue插槽
注意：在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute
我们在这里只讨论v-slot
插槽内容
Vue实现了一套内容分发的 API， 将
它允许你像这样合成组件：
Your Profile
然后你在
当组件渲染的时候，
Your Profile
或者是组件
如果
后备内容
简单点说，在
当我在一个父级组件中使用
但当我们提供内容时，默认的值会被替代掉
Save
具名插槽
将用处不同的插槽，设置不同的名字，我们就可以将我们指定的内容，填写到我们需要的插槽中
例如对于一个带有如下模板的
对于这样的情况，
一个不带 name 的
在向具名插槽提供内容的时候，我们可以在一个
元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
使用v-slot:的template，会将所有内容传入到指定的插槽中，
没有v-slot的template，会将内容传入到默认的插槽中。
作用域插槽
为了让父组件访问子组件的数据（一般父组件是访问不到子组件的数据）
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
例如，设想一个带有如下模板的
{{ user.lastName }}
我们可能想换掉备用内容，用名而非姓来显示。如下：
{{ user.firstName }}
然而上述代码不会正常工作，因为只有
为了让 user 在父级的插槽内容中可用，我们可以将 user 作为
{{ user.lastName }}
绑定在
{{ slotProps.user.firstName }}
在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 slotProps，但你也可以使用任意你喜欢的名字。
在父组件用带值的v-slot定义插槽 prop的名字，像上面的slotProps，这是对象名，
prop可以解构
缩写语法
**跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header： 如果你希望使用缩写的话，你必须始终以明确插槽名取而代之： **
{{ user.firstName }}
在上述情况下，当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上：
{{ slotProps.user.firstName }}
这种写法还可以更简单。就像假定未指明的内容对应默认插槽一样，不带参数的 v-slot 被假定对应默认插槽：
{{ slotProps.user.firstName }}
注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确：
{{ slotProps.user.firstName }}
slotProps is NOT available here
只要出现多个插槽，请始终为所有的插槽使用完整的基于 的语法：
{{ slotProps.user.firstName }}
...