插槽slot就是在模板中将携带的内容填充进某个指定位置. 带不带内容、带什么内容由父组件来控制，将内容放在哪则由子组件控制。 匿名插槽：无论父组件加了什么全部往里填充，没有指定位置默认是匿名 具名插槽：在插槽中添加name的方式指定位置
父组件
.<template> <div> <div>这里是父组件</div> <!-- 步骤四:使用子组件,当没有命名时,默认把全部内容填入匿名插槽 --> <myhead>这里从父组件引入到子组件的匿名插槽</myhead> </div> </template> <script> // 步骤二:引入子组件 import myhead from "../components/myhead"; export default { components: { // 步骤三:注册子组件 myhead, }, }; </script> <style> </style>子组件
.<template> <div class="header"> <div>这里是子组件</div> <!-- 步骤一:写入slot标签 --> <slot></slot> </div> </template> <script> export default {}; </script> <style> </style>过程图 效果
父组件
语法:父组件<标签 slot=‘命名’>内容<标签> 子组件< slot name="">
.<template> <div> <!-- 步骤四:使用子组件,当没有命名时,默认把全部内容填入具名插槽 --> <myhead> <p slot="left">左</p> <p slot="center">中</p> <p slot="right">右</p> </myhead> </div> </template> <script> // 步骤二:引入子组件 import myhead from "../components/myhead"; export default { components: { // 步骤三:注册子组件 myhead, }, }; </script> <style> </style>子组件
.<template> <div class="header"> <!-- 步骤一:写入slot标签 --> <slot name="left"></slot> <slot name="center"></slot> <slot name="right"></slot> </div> </template> <script> export default {}; </script> .<style lang="less" scoped> .header { display: flex; } </style>效果
