vue实现子组件渲染父组件的槽（vue3）

.input-tags{//显示：内联块；位置：相对；}.input-tags-inputer{显示：块；宽度：100%；高度：计算（1.5em+0.75rem+2px）；填充：0.375rem0.75rem；字体大小：1rem；字体粗细：400；行高：1.5；颜色：#495057；背景色：#fff；背景剪辑：填充框；边框：1px实心#ced4da；边界半径：0.25rem；transition:border-color.15sease-in-out,box-shadow.15sease-in-out;&:focus{颜色：#495057;背景色：#fff；边框颜色：#80bdff；大纲：0；框阴影：0000.2remrgb(0123255/25%)；}}.input-tags-list{位置：绝对；顶部：1px；左：1px；底部：1px；右：1px；填充：0.25rem000.5rem；.my-tag{margin-right:0.5rem;}}在写vue通用组件的时候，经常会遇到子组件的slot需要从父组件传过来，也可以在slot上绑定数据。比如当ant-design-vue中的下拉菜单有多个选项时，可以自动通过slot传递。先定义标签的内容，展示如下效果：组件默认效果：使用标签槽的效果：1.思路的核心思想是：将父组件中的槽传递给后代组件作为参数而不是使用slot来传递，比如有两种方法可以将父组件的slot传递给后代组件作为参数：provide+injectform子组件定义props，父组件传递槽给子组件。这两种方法各有优缺点。我喜欢。2.编码：使用provide+inject实现父组件.input-tags{//显示：内联块；位置：相对；}.input-tags-inputer{显示：块；宽度：100%；高度：计算（1.5em+0.75rem+2px）；填充：0.375rem0.75rem；字体大小：1rem；字体粗细：400；行高：1.5；颜色：#495057；背景色：#fff；背景剪辑：填充框；边框：1px实心#ced4da；边界半径：0.25rem；transition:border-color.15sease-in-out,box-shadow.15sease-in-out;&:focus{颜色：#495057;背景色：#fff；边框颜色：#80bdff；大纲：0；框阴影：0000.2remrgb(0123255/25%)；}}.input-tags-list{位置：绝对；顶部：1px；左：1px；底部：1px；右：1px；填充：0.25rem000.5rem；.my-tag{margin-right:0.5rem;}}子组件.my-tag{显示：内联块；垂直对齐：中间；高度：1.75rem；行高:calc(1.75rem-2px);最大宽度：100%；填充：00.5rem；边框：1px实心#d9ecff；边界半径：0.25rem；背景色：#ecf5ff；颜色：#007bff；字体大小：0.75rem；空白：nowrap；溢出：隐藏；文本溢出：省略号；过渡：宽度.3s，高度.3s，字体大小。3s,transform.3s;}标签内容组件（如果使用jsx可以省略该组件）import{inject}from'vue';exportfunctionMyTagContent(props,ctx){letslot;//获取父组件传递的上下文letinputTagsCtx=inject('inputTagsCtX'）;if(inputTagsCtx&&inputTagsCtx.slots.tag){//如果父组件传递了一个标签槽，则优先使用父组件传递的槽=inputTagsCtx.slots.tag;}else{槽=ctx.slots.default;}returnslot(props.tagData);};MyTagContent.props=['tagData'];组件调用;