vue3(插槽)

26 阅读1分钟

插槽相当一个占位符,在子组件中占好位置,父组件中的内容对其填充进去
1.匿名插槽

//子组件
<template>
  <div class="sad">
    <slot></slot>
  </div>
</template>
<script setup lang='ts'>

</script>
//父组件
<template>

 <div>
  <Children>
    <h1>213113</h1>
  </Children>
 </div>
</template>

2.具名插槽,父组件的内容会依据名字的进行一定顺序的填充,即使在父组件是乱序,如果子组件的具名插槽顺序的话,父组件填充过去的内容也是有序的

//子组件
<template>
  <div class="sad">
    <slot name="c1"></slot>
    <slot name="c2"></slot>
    <slot name="c3"></slot>
  </div>
</template>
//父组件
<template>
  <div>
    <Children>
      <template v-slot:c3>
        <h1>第一个</h1>
      </template>
      <template v-slot:c2>
        <h1>第二个</h1>
      </template>
      <template v-slot:c1>
        <h1>第三个</h1>
      </template>
    </Children>
  </div>