vue3-插槽作用域的使用

当我们在父组件定义了一个数组,

  data() {
    return {
      name: ["lkx", "msx"]
    }
  }

 

想把它传到子组件处理后

  props: {
    names: {
      type: Array,
      default: () => []
    }
  }

 

通过插槽的方式再传送回父组件

 <template v-for="(item,index) in names" :key="item">
      <slot ></slot>
    </template>

在父组件对子组件中处理过的数据进行使用时,

比如说我们想要在父组件想使用子组件的item和index的内容将他渲染到html上,如果我们直接使用

 <div>
    <show-names :names="name">
        <button>{{item}}</button>
　　 </show-names>
 </div>

会出现这样的结果

 

 

 

 我们可以这样做,通过作用域插槽的方式来解决

子组件中使用v-bind绑定item和index

 <template v-for="(item,index) in names" :key="item">
      <slot :item="item" :index="index"></slot>
  </template>

父组件中使用v-slot="slotProps"

这里的v-slot="slotProps"是简写形式,因为我们在子组件的slot中没有定义name属性,所以这个slot会有一个默认的name为default,

比方说我们在子组件中定义一个name="lkx",那么父组件中的写法就变成v-slot:lkx="slotProps",又因为v-slot:的语法糖是#,所以父组件最终写为#lkx="slotProps"

<template>
  <div>
    <show-names :names="name">
      <template v-slot="slotProps">
        <button>{{ slotProps.item }}</button>
      </template>
    </show-names>
  </div>
</template>

独占默认插槽

  <show-names :names="name" v-slot="lkx">

        <button>{{ lkx.item }}--{{lkx.index}}</button>

    </show-names>

 

 

 

嗯,我咋感觉和子传父那么像呢,明天动手试试