vue2.6.0版本插槽的使用

插槽slot简单的理解就是一段html代码模板，只是需要的在一个特定的情况下使用。插槽分为普通插槽，具名插槽，作用域插槽。

• 普通插槽

普通插槽，新建一个局部组件tip，在tip中新建一个slot标签，里面放上一段html代码模板，然后在父级组件引用tip，局部组件tip中如果填写的有内容，则就渲染填写的内容，否则就渲染局部组件slot里面的内容。

局部组件
<template>
    <div>
        <slot>今天天气很棒</slot>
    </div>
</template>


父级组件
<template>
  <div>
    <tip>666</tip>
  </div>
</template>

<script>
import tip from "../components/Tip";
</script>

渲染结果

• 具名插槽

有时候需要使用多个插槽，就需要使用具名插槽。在局部组件tip中slot加一个name属性，然后在父级组件使用时，通过v-slot=name，来使用指定的插槽。

注意v-slot只能使用template中

局部组件
<template>
    <div>
        <slot name="der" >今天天气很棒</slot>
    </div>
</template>

父级组件

<template>
  <div>
    <tip>
      <template v-slot:der><span>真棒！</span></template>
    </tip>
  </div>
</template>

缩写
<template>
  <div>
    <tip>
      <template #der><span>真棒！</span></template>
    </tip>
  </div>
</template>

渲染结果 image.png

• 作用域插槽

作用域插槽就是在父组件中让插槽内容能够访问子组件中才有的数据。子组件的插槽通过v-bind绑定子组件的data属性，在父级组件中自定义一个属性名，通过这个属性名可以访问到子组件传递的属性值，类似于父子通信的props。

局部组件
<template>
    <div>
        <slot name="der" :na="name">今天天气很棒</slot>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                name:'小明'
            }
        }
    }
</script>

父级组件
<template>
    <div>
        <tip><template #der="tool">{{tool.na}}</template></tip>//tool是自定义的，der为slot的name
        或
       <tip><template v-bind:der="tool">{{tool.na}}</template></tip>
    </div>
</template>

渲染结果 image.png