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>

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

巴特西

vue3-插槽作用域的使用

最新文章

热门文章