1.默认插槽
// 子组件 <template> <div> <slot></slot> </div> </template> // 父组件 <template> <ChildComponent> <p>这是插槽中的内容</p> </ChildComponent> </template> 2.具名插槽 // 子组件 <template> <div> <slot name="header"></slot> <slot name="main"></slot> <slot name="footer"></slot> </div> </template> // 父组件 <template> <ChildComponent> <template v-slot:header> <h1>这是头部内容</h1> </template> <template v-slot:main> <p>这是主体内容</p> </template> <template v-slot:footer> <footer>这是底部内容</footer> </template> </ChildComponent> </template> 3.作用域插槽 // 子组件 <template> <div> <slot :text="greetingText"></slot> </div> </template> <script> export default { data() { return { greetingText: 'Hello from the child component!' } } } </script> // 父组件 <template> <ChildComponent> <template v-slot:default="slotProps"> <p>{{ slotProps.text }}</p> </template> </ChildComponent> </template> 标签：vue,这是,作用域,插槽,内容,组件 From： https://www.cnblogs.com/fly-s/p/18327313