Vue插槽solt

本文主要是介绍Vue插槽solt，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

作用:让父组件可以向子组件指定位置传入特定的html结构,也是一种组件之间的通信方式,适用于父组件===>子组件

###### 1.默认插槽

```javascript
// 父组件
<Category>
<div>html结构</div>
</Category>

//子组件
<template>
<div class="category">
<!-- 定义一个插槽 -->
<slot>插槽默认值</slot>
</div>
</template>

```

###### 2.具名插槽

```javascript
// 父组件
<Category>
<div slot="center">html结构</div>
</Category>
// 新写法
<Category>
<div v-slot:footer>html结构</div>
</Category>

//子组件
<template>
<div class="category">
<!-- 定义一个插槽 -->
<slot name="center">插槽默认值</slot>
<slot name="footer">插槽默认值</slot>
</div>
</template>
```

###### 3.作用域插槽

​ 1.理解:**数据在组件的自身,但根据数据所生成的结构由使用者决定**,(games数组在Category组件中,但使用数据所展示的结构由App组件决定)

```javascript
//父组件
<template>
<div class="container">
<Category title="游戏">
<!-- 作用域插槽必须外面用template标签包裹,里面写上scope属性,他的值可以随便写,是一个对象,里面包含着slot标签里的属性,这里的scope值可以随便写 -->
<template scope="a">
//生成无序列表
<ul>
<li v-for="(g, index) of a.games" :key="index">{{ g }}</li>
</ul>
</template>
</Category>

<Category title="游戏">
<!-- 解构赋值写法 -->
<template scope="{games}">
//生成有序列表
<ol>
<li style="color: red" v-for="(g, index) of games" :key="index">
{{ g }}
</li>
</ol>
</template>
</Category>

<Category title="游戏">
<!-- 新写法:slot-scope -->
<template slot-scope="{ games }">
//生成h4标签
<h4 v-for="(g, index) of games" :key="index">{{ g }}</h4>
</template>
</Category>
</div>
</template>

//子组件
<template>
<div class="category">
<h3>{{ title }}分类</h3>
<!-- 可以给slot插槽里面利用属性值传递参数 -->
<slot :games="games"> 我是默认的插槽</slot>
</div>
</template>

<script>
export default {
name: "Categoty",
props: ["title"],
data() {
return {
games: ["LOL", "CF", "绝地求生", "扫雷"],
};
},
};
</script>
// *作用域插槽也可以有名字,意思是可以和具名插槽配合着使用*
```

这篇关于Vue插槽solt的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！