小白学习笔记:Vue插槽的使用
前言
Vue插槽可以由父组件向子组件传递HTML结构,主要解决如下问题:
应用同一个子组件展示不同的内容(此处的内容指的是DOM结构,不是单纯的数据。)
通俗表示:在子组件中挖坑,在父组件中填坑
提示:以下是本篇文章正文内容,仅供参考,如有问题,欢迎各位大神批评指正,感谢,感谢!
一、默认插槽
在子组件就挖一个坑,父组件只要有东西就往坑里填。
示例:在Father组件中,想应用三次Son组件,并且根据需求,每个Son组件需要调整DOM结构。
//父组件
<div id="Father">
<Son title="美食">
<img src="./statics/goubao.png" alt="">
</Son>
<Son title="游戏">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</Son>
<Son title="电影">
<h3>我是电影</h3>
</Son>
</div>
//子组件
<div class="Son">
<h1>{{title}}</h1> //每个组件都有的结构
<slot></slot> //根据父组件传递的结构动态改变
</div>
二、具名插槽
在子组件挖坑的时候,给每个坑起好名字,到时候根据名字往坑里填东西
子组件:挖坑的时候 命名;
//子组件
<div class="son">
<h1>{{title}}</h1>
<slot name="center"></slot>
<slot name="footer"></slot>
</div>
父组件:填坑的时候要指名道姓,给谁填坑;有三种填坑方式
//父组件
<div id="myApp">
//方式一:两部分内容分别填给两个插槽,但是对于footer插槽,填了两次,这合理?这不合理!
<Son title="美食">
<img slot="center" src="./statics/豆包.png" alt="">
<div slot="footer" class="footer">
<a href="https://www.baidu.com">链接111</a>
<a href="https://www.baidu.com">链接222</a>
<a href="https://www.baidu.com">链接333</a>
</div>
<h3 slot="footer">我是美食</h3>
</Son>
//方式二:既然都是给footer插槽的,那就把他们包在一个div里,那这样的问题就是莫名给DOM结构多包了一层div
<Son title="游戏">
<ul slot="center">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<div slot="footer"> //就是这一层div,是多余的
<div class="footer">
<a href="https://www.baidu.com">链接111</a>
<a href="https://www.baidu.com">链接222</a>
<a href="https://www.baidu.com">链接333</a>
</div>
<h3>我是美食</h3>
</div>
</Son>
//方式三:利用template,页面渲染后,标签消失,并且也可以换一种写法 slot="xxx"变为v-slot:xxx
<Son title="电影">
<h3 slot="center">我是电影</h3>
<template v-slot:footer>
<div class="footer">
<a href="https://www.baidu.com">链接111</a>
<a href="https://www.baidu.com">链接222</a>
<a href="https://www.baidu.com">链接333</a>
</div>
<h2>我是电影</h2>
</template>
</Son>
</div>
三、作用域插槽
数据在子组件中,但是DOM结构在父组件,所以要进行数据传递。
专业:数据在组件自身,但是根据数据生成的DOM结构由父组件指定
使用template标签中的slot-scope属性
//父组件
<div id="myApp">
<Son title="games"
<template slot-scope="data">
<ul>
<li v-for="(v,i) in data.items" :key="i">{{v}}</li>
</ul>
</template>
</Son>
<Son title="games">
<template slot-scope="data">
<ol>
<li v-for="(v,i) in data.items" :key="i">{{v}}</li>
</ol>
</template>
</Son>
<Son title="games">
<template slot-scope="{items}">
<h4 v-for="(v,i) in items" :key="i">{{v}}</h4>
</template>
</Son>
</div>
//子组件 默认插槽、传递数据
<div class="son">
<h1>{{title}}</h1>
<slot :items="items" ></slot>
</div>
注意:
- 必须使用template标签
- 使用slot-scope属性或者scope属性,都可
- 使用data或者es6语法{}接受参数,都可
Tips
1.插槽中DOM结构的样式,可以设置在父组件,也可以设置在子组件