vue3+web 项目中的实际预期:

父组件:

<script setup lang="ts">
import slotTemp from './components/slot.vue'
</script>

<template>
  <slot-temp>
    <template v-slot:user="slotProps">
      <div class="btn" @click="a(slotProps)">{{slotProps}}</div>
    </template>
  </slot-temp>
</template>

子组件:

<template>
   <div>
     <div style="position: relative;">
       <div v-for="item in 5" :style="{position:'absolute',top: 100 * item +'px'}" 
               type="primary">
           <slot v-bind:user="item" name="user" />
       </div>
     </div>
   </div>
</template>

插槽的内容分别在插槽的绝对定位中显示

vue3+uni-app+微信小程序 项目中错误预期:

  • 代码同上,错误预期:
  1. 插槽中的内容 111,都堆积在顶部,而没有根据父元素的绝对定位限制在红色方块位置
  2. 只能对最后一个插槽内容进行样式设置,切设置一个样式,其他插槽的内容都改变了位置
    在这里插入图片描述

vue3+uni-app+微信小程序的解决方案:

在父组件中直接对插槽的内容设置定位即可

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐