上来先介绍下博主哈,之前写的是jq项目,后面直接就转react,现在业余vue开发者,
作为一年react开发经验,一年jq项目, 菜鸟vue水平,在这里扯一扯 博主对vue插槽的看法哈
如果我面试的vue初级开发,我会问你有没有自己封装过组件,你说有的话,我会继续问你 有没有用到插槽呢, 如果用到插槽的话,说下你对作用域插槽的理解呢, 如果你说的可以,我就会当场说 你明天来上班吧,工资好谈呢.
包括你以后想进阶成为高级vue开发那么你必须要知道怎么用slot-scope去做一些数据和 ui 分离的封装
什么东西其实我们首先要学会去使用它,然后就是深入去理解它的原理,当然如果我们也可以完全是个业务开发工程师,不必要可以去追求他的原理.
这里只是初级的一个入门的(其实往深处去,博主也不会,哈哈哈 博主很菜的,真是又菜又想分享)
要进入作用域插槽 先简单了解下 具名插槽
// 父亲组件这个
parent.vue
<child>
<template v-slot:header>
<h1>具名插槽</h1>
</template>
</child>
v-slot 其实也可以简写成。#header
<template #:header>
<h1>具名插槽</h1>
</template>
子组件
child.vue
<slot name="header"></slot>
页面最后就会渲染出来
注意哈: v-slot一般只能作用在template模板上,当然也可以作用在其他的组件上,但基本上很少(这里就不讲解那种情况了哈)
作用域插槽
作用域插槽 允许父组件可以使用子组件中的数据,真正实现了 数据和ui组件分离,然后在父亲组件中可以自定义 ui的渲染样式,实现不同的地方不同的渲染形式,在有些时候还是非常有用的.
举个例子: 瀑布流布局,内容在不同的地方 可以内部样式是不一样的,这个时候用到作用域插槽就非常nice了
这里我只是列举出 怎么使用 slot-scope
父亲组件中
parent.vue
// 我们在父组件可以定义渲染的样式和 展示形式
<child>
<template #header="{ item }">
<div style="color: green;">{
{
item }}</div>
</template>
<template #footer="{ item }">
<div style="color: red;">{
{
item }}</div>
</template>
</child>
子组件中
子组件通过slot中传入属性 然后传递给父组件中
<div v-for="item in list" :key="item">
<slot v-if="item % 2" :item="item" name="header"></slot>
<slot v-else :item="item" name="footer"></slot>
</div>
<script setup>
import {
ref } from "vue";
const list = ref([1, 2, 3, 4, 5, 6, 7]);
</script>
最后页面渲染 出来的效果
菜鸟博主 就说到这里。因为来业务了, 需要去写bug了,程序员真的不容易 ,加油吧
关注我吧。 持续更新 前端知识