Vue3Slot——Slot全家桶使用详解_0

slotslot是在子组件中为父组件提供的占位符，用表示，父组件可以填充该占位符Any模板代码，填充的内容会自动替换标签。插槽分为三种类型：匿名插槽、命名插槽和作用域插槽。1.匿名槽没有名字的槽就是匿名槽，一个组件可以放置一个或多个。在子组件中放置槽：父组件使用槽：

哈哈哈哈哈哈哈

//or

哈哈哈哈哈哈

如果有多个slot，父组件需要填充的内容会被插入多次。2.命名插槽组件中可以放置多个插槽。如果都是匿名槽，会渲染父组件的默认内容，不可能插入多个不同的内容。在这种情况下，您需要为插槽设置一个名称以便区分它们。namedslot就是给slot起一个名字，组件中的多个slot可以放在不同的地方。当父级填充内容时，可以根据名称将内容填充到相应的插槽中。定义为多个插槽的组件：父组件填充内容需要对象槽名：

我是header

中间的匿名槽

我是footer

可以简写为：

我是页眉

中间的匿名槽

我是页脚

3.ScopeslotsAnonymousslots和namedslots父组件只能访问父组件中编译的内容，子组件只能访问子组件中的内容。有时我们父组件需要访问子组件中的内容时，vue为我们提供了作用域槽。要传输的数据在作用域插槽子组件中定义：在调用组件的父组件中接收数据：{{data}}4.Dynamic插槽中有多个插槽，不同的插槽显示不同的状态。这时候，我们就可以使用动态槽。槽名是一个变量名，其值可以动态修改。

Dynamicslot

我们可以做一个类似tab的效果：父组件代码：{{item.content}}

我是{{name}}插槽

子组件代码：此时，您可以动态选择任意一个插槽进行显示。