Vue-插槽 Slots

文章目录

前言

本篇文章不做过多的讲解与说明,只记录个人实验测试案例。

详见:vue 官方文档 插槽 slots

什么叫插槽

之前的博客中,父级组件可以使用props向子级组件中传递StringArrayObjectFunction等数据类型。如果需要父级元素向子级元素中传递JavaScript值,并要求子级模板进行渲染呢?此时该如何做?

下面来说插槽的用法汇总。

简单插槽

编写一个父级模板,并引入子级模板ComponentSoltChild.vue模板,并向其中传递模板片段

ComponentSoltFather.vue

html 复制代码
<template>
    <h2>父级模板</h2>
    <ComponentSoltChild>
     <h2>父级传递子级模板数据</h2> <!-- 插槽数据入口 -->
     <div style="color: red;">666666</div>
    </ComponentSoltChild>
</template>
<script>
// 引用子级模板组件
import ComponentSoltChild from './ComponentSoltChild.vue';
export default{
 components:{
 	// 注册子级模板组件
  ComponentSoltChild
 }
}
</script>

然后定义一个子级模板,并标记父级传递子级模板语法需要渲染的位置。

ComponentSoltChild.vue

html 复制代码
<template>
 <h2>子级模板</h2>
 <!-- 插槽出口,位置不同渲染的区域也不同 -->
 <slot></slot>
</template>

查看显示效果:

指定默认值

如果在父级组件模板中,并未传递对应的模板语法片段,此时需要让自己的插槽中展示默认的数据信息。

直接修改子级组件模板中的插槽内容,如下所示:
ComponentSoltChild.vue

html 复制代码
<template>
 <h2>子级模板</h2>
 <slot>这是默认显示项</slot>
</template>

将父级组件中传递子级模板中的片段删除,查看显示效果:

ComponentSoltFather.vue

html 复制代码
<template>
    <h2>父级模板</h2>
    <ComponentSoltChild>
     <!-- 插槽数据入口 -->
     <!-- <h2>父级传递子级模板数据</h2> 
     <div style="color: red;">666666</div> -->
    </ComponentSoltChild>
</template>
<script>
import ComponentSoltChild from './ComponentSoltChild.vue';
export default{
 components:{
  ComponentSoltChild
 }
}
</script>

显示效果如下所示:

多个插槽根据父级别名称指定区域显示(具名插槽)

如果直接在子级模板中,定义多个插槽,则会导致:

每个父级传递的模板标签作为值,放入一个插槽标签中进行渲染,并不会实现指定渲染。

如下所示,只修改子级组件模板:

ComponentSoltChild.vue

html 复制代码
<template>
 <slot></slot>
 <h2>子级模板</h2>
 <slot></slot>
</template>

【思考】如果我想让父级传入的某个显示在第一个solt中,另一个显示在第二个solt中,如何实现?

可以在父级中传递的模板片段上,定义别名称。

再在子级模板中,指定具体的别名称实现一对一渲染。

此时则需要先修改父级模板中传入的模板片段信息,指定别名称。

ComponentSoltFather.vue

在其中针对片段,采取v-slot:xxx定义唯一别名称。

html 复制代码
<template>
    <h2>父级模板</h2>
    <ComponentSoltChild>
     <!-- 插槽数据入口 增加模板别名称-->
     <template v-slot:one >
       <h2>父级传递子级模板数据</h2> 
     </template>
     
     <template v-slot:two >
       <div style="color: red;">666666</div>
     </template>
     
    </ComponentSoltChild>
</template>
<script>
import ComponentSoltChild from './ComponentSoltChild.vue';
export default{
 components:{
  ComponentSoltChild
 }
}
</script>

修改子级组件中的显示项,对应的<solt>标签,与父级的片段别名称实现绑定。

ComponentSoltChild.vue
<solt>标签,使用name="xxx"与父级中定义的别名称进行绑定。

html 复制代码
<template>
 <slot name="one">这是默认显示项</slot>
 <h2>子级模板</h2>
 <slot name="two">这是默认显示项</slot>
</template>

显示效果如下所示:

【扩展】v-slot: 可以缩写为 #

修改父级组件中传递子级模板的模板名语法格式,如下:

ComponentSoltFather.vue

html 复制代码
<template>
    <h2>父级模板</h2>
    <ComponentSoltChild>
     <!-- 插槽数据入口 增加模板别名称-->
     <!-- v-slot:xxx 可以缩写为 #xxx -->
     <template #one >
       <h2>父级传递子级模板数据</h2> 
     </template>
     
     <template v-slot:two >
       <div style="color: red;">666666</div>
     </template>
     
    </ComponentSoltChild>
</template>
<script>
import ComponentSoltChild from './ComponentSoltChild.vue';
export default{
 components:{
  ComponentSoltChild
 }
}
</script>

再次查看显示效果。

官网图片:

作用域插槽

后续补充

相关推荐
芒果茶叶27 分钟前
并行SSR,SSR并行加载
前端·javascript·架构
vortex540 分钟前
解决 Kali 中 Firefox 下载语言包和插件速度慢的问题:配置国内镜像加速
前端·firefox·腾讯云
修仙的人42 分钟前
Rust + WebAssembly 实战!别再听说,学会使用!
前端·rust
maxine1 小时前
JS Entry和 HTML Entry
前端
用户63310776123661 小时前
Who is a Promise?
前端
用户785127814701 小时前
从 0 到 1 落地淘宝商品 API 开发:手把手教你采集、分析与避坑(含完整可运行代码)
vue.js
威风的虫1 小时前
JavaScript中的axios
开发语言·javascript·ecmascript
比老马还六1 小时前
Blockly元组积木开发
前端
笨笨狗吞噬者1 小时前
【uniapp】小程序体积优化,JSON文件压缩
前端·微信小程序·uni-app
bot5556662 小时前
“企业微信iPad协议”静默 72 小时:一台被遗忘的测试机如何成为私域的逃生梯
javascript·面试