Vue常见使用(1)——插槽slot的用法

我们知道vue项目通常由多个组件构成。然而在使用父子组件的时候，总想在父组件中自定义一些标签来插入到内部子组件中，而在vue2.1.0+新增了一种插槽机制。

插槽子组件中给你的HTML模板占了一个位置。插槽又分为 匿名插槽、具名插槽、作用域插槽。

1.匿名插槽

当slot没有指定name属性值的时候，它隐藏的name属性为default。一个组件内只有有一个匿名插槽。

父组件:

<template>

<div>

<h2>我是父组件</h2>

<child>

<p>我是默认的插槽</p>

</child>

</div>

</template>

子组件: child.vue

<template>

<div>

<div>我是子组件</div>

<slot></slot>

</div>

</template>

2.具名插槽

具名插槽就是给插槽进行命名。父组件在调用的时候，可以使用v-slot绑定名称从而实现对应，v-slot也可以缩写为# 。

子组件:

<template>

<div class="nav-bar">

<!-- <slot name="default"></slot> -->

<div class="left">

<slot name="left1"></slot>

</div>

<div class="center">

<slot name="center1"></slot>

</div>

<div class="right">

<slot name="right1"></slot>

</div>

</div>

</template

父组件:

<template>

<div>

<my-slot-cpn1>

<template v-slot:left1>

<button>左边按钮</button>

</template>

<template #center1>

<button>我是中间按钮</button>

</template>

<template #right1>

<button>右边按钮</button>

</template>

</my-slot-cpn1>

</div>

3.作用域插槽

当你想在一个插槽中使用数据时，就要使用作用域插槽的方式。

为了让 子组件中的数据 在父级的插槽 内容中可用我们可以将 数据 作为 元素的一个特性绑定上去： v-bind:text="text"。

注意：

匿名的作用域插槽和具名的作用域插槽 区别在v-slot:defult="接受的名称"(defult(匿名的可以不写，具名的相反要写的是对应的name))

v-solt可以解构接收 解构接收的字段要和传的字段一样才可以 例如 :one 对应 v-slot="{one}"