Vue slot 过时处理

vue slot 过时处理

旧版的使用方式

这里提示slot 已经过时

Old named slot syntax has been deprecated, use the new syntax instead: <template v-slot:name>

<template>
  <div>
    <slot-test>
      <p slot="testSlot">slot content</p>
    </slot-test>
  </div>
</template>

新版的使用方式

使用 v-slot:slotName 或 #slotName ，两种方式都需要写在<template>标签中

使用 v-slot:slotName

<template>
  <div>
    <slot-test>
      <template v-slot:testSlot>
        <p>slot content</p>
      </template>
    </slot-test>
  </div>
</template>

使用 #slotName

<template>
  <div>
    <slot-test>
      <template #testSlot>
        <p>slot content</p>
      </template>
    </slot-test>
  </div>
</template>