vue中的插槽

1.什么是插槽?

插槽的关键字slot，默认情况下，组件中的模板会覆盖组件中的原始内容（即自定义标签对内部的内容会不显示）

组件的原始内容： 即在vue实例范围之内，因此可以调用实例的data和methods

好处:让组件使用更灵活, 功能更强大, 复用性更强,让组件内的部分标签支持自定义

使用场景:比如布局组件、表格列、下拉选、弹框显示内容等

比如我们项目中经常会使用到一个多处复用的组件,但是在每个地方使用时,都需要一些细微的更改,只需使用插槽向需要微调的位置传递内容,就能让这个组件在不同场景下应用

简单说就是可以对复用组件的私人定制!

2.插槽的分类

插槽总共分为三类:

匿名插槽

具名插槽

作用域插槽

3.默认插槽

默认插槽就是指没有名字的插槽，子组件未定义的名字的插槽，父级将会把指定插槽的填充的内容填充到默认插槽中

default，可以省略default直接写v-slot

先上效果:

1. 在子组件中使用 占位

<template>
    <div>
        <h3>世界各地菠萝价格</h3> 
        <img src="./菠萝.png">
        <slot></slot>
    </div>
</template>
<style>
img {
   
    width: 5%;
    height: 5%;
}
</style>

2.在父组件中给这个占位符填充内容

<template>
  <div>
    <div>
      <Son> <div>缅甸88一斤</div></Son>
      <Son><div>泰国99一斤</div></Son>
    </div>
  </div>
</template>

<script>
import Son from "./Son.vue";
export default {