vue_cli的slot插槽
在外壳组件中
1 <template> 2 <div class="waike"> 3 <div>头部--Waike</div> 4 <slot name="content"></slot> <!-- 要发生变化的内容用slot插槽占位 --> 5 <div>底部--Waike</div> 6 </div> 7 </template> 8 <script> 9 export default { 10 name: 'Waike' 11 } 12 </script>
在要使用外壳的组件中
1 <template> 2 <div class="parent"> 3 <Waike> 4 <template #content> <!-- v-slot:插槽名，可简写为#插槽名 --> 5 <div>要变化的内容写这里--在使用Waike的组件里</div> 6 </template> 7 </Waike> 8 </div> 9 </template> 10 <script> 11 import Waike from './Waike 12 export default { 13 name: 'Parent', 14 components: { 15 Waike 16 } 17 } 18 </script>
结果：
