slot插槽

定义

我认为的插槽的含义： 简单的说，插槽就是可以让开发者自定义地往子组件中放置代码片段而开发出来的东西。就好像专门在某几个地方弄了几个槽（子组件中），我们开发时，就可以在对应的槽中放置对应的代码了。

匿名插槽例子

父组件代码

<template>
  <div>
      <Son><p>web前端攻城狮</p></Son>
  </div>
</template>

<script>
import Son from './Son'
export default {
  components: {
    Son
  }
}
</script>

子组件代码

<template>
  <div>
      <p>pppppppppppppppppp</p>
      <p>pppppppppppppppppp</p>
      <slot></slot>
  </div>
</template>

<script>
export default {
   
}
</script>

组件件上 <slot></slot>最后会被替换成 <p>web前端攻城狮</p>

具名插槽

父组件代码

<template>
  <div>
    <ElCard>
      <div slot="header">添加城市header</div>
      
      <button>测试</button>
      
      <div slot="footer">立即添加footer</div>
    </ElCard>
  </div>
</template>

<script>
import ElCard from "./el-card";
export default {
  components: {
    ElCard
  }
};
</script>

<style>
</style>

子组件代码

<template>
  <div>
      // 接收父组件  <div slot="header">添加城市header</div>的内容
      <slot name="header"></slot>
      // 接收 <div slot="footer">立即添加footer</div>
      <slot name="footer"></slot>
      // 其他内容由匿名插槽接收
        <slot></slot>
  </div>
</template>

<script>
export default {

}
</script>