Vue: 关于组件与插槽

需求: 假设说, 大多数时候只会用到第一个组件, 偶尔会用到第二个同部位组件

第一步:

建立常用组件1 和 不常用组件2

<template>
  <div class="bottomFooter">
	<hr/>
  	<div>我是底部</div>
  </div>
</template>

<script>
export default {
    name: 'bottomFooter', // 组件名称
}
</script>

<template>
  <div class="bottomFooter2">
	<hr/>
  	<div>我是底部2</div>
  </div>
</template>

<script>
export default {
    name: 'bottomFooter2', // 组件名称
}
</script>

**第二步: **

把组件1跟组件2, 一起放在公用的slot插槽组件中, 把要传出的方法写在[props]里面, 如下代码所示 ↓

<template>
  <div class="toMidBottomLayout">
    <top-header></top-header>

    <slot name="middleLayout"></slot>

    &