vue插槽slot

插槽的简单使用

如果传数值 用父传子

如果传的是标签/组件 用插槽

具名插槽

老写法

具名插槽名字唯一

父子插槽一一对应

父

<Car>
  <h1 slot="car">性感小车不在线</h1>
  <p slot="color">我是小绿绿</p>
</Car>

子

<slot name="car">
    <h1>性感小车在线喷漆</h1>
</slot>

新用法v-slot

父

<template v-slot:car>//#car
  <h1>性感小车不在线</h1>
</template>
<template v-slot:color>//#color
  <p>我是小绿绿</p>
</template>

子

<slot name="car">
    <h1>性感小车在线喷漆</h1>
</slot>
<hr>
<slot name="color">
    <p>我是小粉粉</p>
</slot>

具名插槽控制显示位置

父

<Car>
  <template #forward>
    <button>前</button>
  </template>
  <template #back>