第九十篇:Vue 具名插槽
好家伙
1.什么是具名插槽?
来简单理解一下,
具有自己名字的插槽,就是具名插槽
我们来尝试使用一下具名插槽:
在Article.vue组件中:
<template>
<div class="article-container">
<!-- 文章内容 -->
<div class="header-box">
<slot name="title"></slot>
</div>
<!-- 文章标题-->
<div class="content-box">
<slot name="content"></slot>
</div>
<!-- 文章作者 -->
<div class="footer-box">
<slot name="author"></slot>
</div>
</div> </template> <script>
export default { }
</script> <style lang="less" scoped>
.article-container{
>div{
min-height:150px;
}
.header-box{
background-color: pink;
}
.content-box{
background-color: lightblue;
}
.footer-box{
background-color: lightsalmon;
}
} </style>
在App.vue组件中:
<template>
<div>
<h1>App根组件</h1>
<Left>
<!-- 1.如果要把内容填充到指定名称的插槽中,需要使用v-slot:这个指令 -->
<!-- 2.v-slot:后面要跟上插槽的名字 -->
<!-- 3.v-slot:指令不能直接用在元素身上,必须用在template标签上 -->
<!-- 4.template这个标签,他是一个虚拟的标签,只起到包裹性质的作用,但是不会被渲染为任何实质性的html元素 -->
<template v-slot:default>
<p>我是用来测试插槽的p标签</p>
</template> </Left>
<Article>
<template #title>
<h3>我是头</h3>
</template> <template #content>
<h3>写博客真是一件开心的事情(NO)</h3>
</template> <template #author>
<h3>作者:养肥胖虎</h3>
</template>
</Article>
</div>
</template> <script>
//1.导入需要的组件
import Left from './components/Left.vue'
import Right from './components/Right.vue'
import Article from './components/Article.vue' export default {
data(){
return{
comName:'Left'
}
},
components:{
Left,
Right ,
Article
//简写为 Left
}
}
</script>
来看看效果:
第九十篇:Vue 具名插槽的更多相关文章
- 第九十一篇:Vue 具名插槽作用域
好家伙, 1.作用域插槽 插槽在定义的时候,可以定义一些属性,便于在父组件中使用 来看看代码: Article.vue组件中: <template> <div class=" ...
- vue中具名插槽的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue(基础二)_组件,过滤器,具名插槽
一.前言 主要包括: 1.组件(全局组件和局部组件) 2.父组件和子组件之间的通信(单层) 3.插槽和具名插槽 ...
- [Vue]组件——插槽:slot(匿名插槽,具名插槽)与slot-scope(作用域插槽)
1.单个插槽 | 匿名插槽 1.1<navigation-link> 子组件定义为: <a v-bind:href="url" class="nav-l ...
- Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】(2022/8/30)
插槽Vue.js官网介绍:https://vuejs.org/guide/components/slots.html 会牵涉到template的用法.占位.实际不渲染到页面中 1.默认插槽: 1.1 ...
- vue组件---插槽
(1)插槽内容 Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 <slot> 元素作为承载分发内容的出口. 在父级组件里可以 ...
- vue使用插槽分发内容slot的用法
将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 <son-tmp> <div>我是文字,我需要放到son-tmp组件里面制定的位置</div&g ...
- vue 开发系列(十) VUE 作用域插槽
使用场景 官方解释,有时让插槽内容能够访问子组件中才有的数据是很有用的.比如我们在使用ant-design-vue 的表格控件时. <a-table-column title="注释& ...
- Vue中插槽slot的使用
插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题在这里就点出来了,是显示不显示和怎样显示. 由于插槽是一块模板,所 ...
随机推荐
- netty系列之:HashedWheelTimer一种定时器的高效实现
目录 简介 java.util.Timer java.util.concurrent.ScheduledThreadPoolExecutor HashedWheelTimer 总结 简介 定时器是一种 ...
- nifi从入门到实战(保姆级教程)——环境篇
背景: 公司领导决定将各种基础数据的导入从代码中分离出来,用Apache Nifi替换.使开发者们更关注在业务上,而不用关心基础的由来. Apache Nifi对于整个团队都是一个全新的工具,之前大家 ...
- 如何借助Chrome Tool Dev 帮助前端开发
11111111111111111111111111111111111111111111111111
- Python中print()函数的用法详情
描述 print() 方法用于打印输出,最python中常见的一个函数. 在交互环境中输入help(print)指令,可以显示print()函数的使用方法. >>> help(pri ...
- 强化学习-学习笔记12 | Dueling Network
这是价值学习高级技巧第三篇,前两篇主要是针对 TD 算法的改进,而Dueling Network 对 DQN 的结构进行改进,能够大幅度改进DQN的效果. Dueling Network 的应用范围不 ...
- wcf连接数据库用sqlhelper,连接数一直没有释放反而增加
找了一天,发现原因是配置的连接字符串没有加上最大连接数,所以每次请求都是一直增加,而MariaDB默认的连接数是151,为了本地多项目测试已改成以前. 下面是配置的连接字符串: <add na ...
- c:找到出现次数最多的递增数字串
如题,如何在一亿位整数组成的字符串中找到出现次数最多的递增数字串? 答案: #include <stdio.h> #include <string.h> #define MAX ...
- 基于 Hexo 从零开始搭建个人博客(五)
阅读本篇前,请先阅读前几篇文章: 基于 Hexo 从零开始搭建个人博客(一) 基于 Hexo 从零开始搭建个人博客(二) 基于 Hexo 从零开始搭建个人博客(三) 基于 Hexo 从零开始搭建个人博 ...
- SQL语句的整合
基础语法 https://blog.csdn.net/m0_37989980/article/details/103413942 CRUD 提供给数据库管理员的基本操作,CRUD(Create, Re ...
- CentOS 定时计划任务设置
一.安装crontab服务并设置开机自启 yum install crontabs (centos默认就会带,一般不需要安装) systemctl enable crond (设为开机启动) syst ...