Vue学习------组件插槽

Vue学习------组件插槽

首先在子组件里定义 slot标签

<slot name="one"><a>1111</a></slot>

<slot name="two" ><a>2222</a></slot>

之后在父组件里用v-solt：one标明使用插槽

<template v-slot:one>
          <button>55555</button>
</template>

如果插槽传过来值

<slot name="two" :user="user"><a>2222</a></slot>

父组件需使用two=”data“来获取值 这也是子组件传值给父组件的一种

<template v-slot:two="data">
          <button>{{data.user.name}}</button>
</template>

子组件里的插槽也可以使用 default缺省值