好家伙

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 具名插槽的更多相关文章

  1. 第九十一篇:Vue 具名插槽作用域

    好家伙, 1.作用域插槽 插槽在定义的时候,可以定义一些属性,便于在父组件中使用 来看看代码: Article.vue组件中: <template> <div class=" ...

  2. vue中具名插槽的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue(基础二)_组件,过滤器,具名插槽

    一.前言 主要包括:  1.组件(全局组件和局部组件)                     2.父组件和子组件之间的通信(单层)                     3.插槽和具名插槽     ...

  4. [Vue]组件——插槽:slot(匿名插槽,具名插槽)与slot-scope(作用域插槽)

    1.单个插槽 | 匿名插槽 1.1<navigation-link> 子组件定义为: <a v-bind:href="url" class="nav-l ...

  5. Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】(2022/8/30)

    插槽Vue.js官网介绍:https://vuejs.org/guide/components/slots.html 会牵涉到template的用法.占位.实际不渲染到页面中 1.默认插槽: 1.1 ...

  6. vue组件---插槽

    (1)插槽内容 Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 <slot> 元素作为承载分发内容的出口. 在父级组件里可以 ...

  7. vue使用插槽分发内容slot的用法

    将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 <son-tmp> <div>我是文字,我需要放到son-tmp组件里面制定的位置</div&g ...

  8. vue 开发系列(十) VUE 作用域插槽

    使用场景 官方解释,有时让插槽内容能够访问子组件中才有的数据是很有用的.比如我们在使用ant-design-vue 的表格控件时. <a-table-column title="注释& ...

  9. Vue中插槽slot的使用

    插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题在这里就点出来了,是显示不显示和怎样显示. 由于插槽是一块模板,所 ...

随机推荐

  1. netty系列之:HashedWheelTimer一种定时器的高效实现

    目录 简介 java.util.Timer java.util.concurrent.ScheduledThreadPoolExecutor HashedWheelTimer 总结 简介 定时器是一种 ...

  2. nifi从入门到实战(保姆级教程)——环境篇

    背景: 公司领导决定将各种基础数据的导入从代码中分离出来,用Apache Nifi替换.使开发者们更关注在业务上,而不用关心基础的由来. Apache Nifi对于整个团队都是一个全新的工具,之前大家 ...

  3. 如何借助Chrome Tool Dev 帮助前端开发

    11111111111111111111111111111111111111111111111111

  4. Python中print()函数的用法详情

    描述 print() 方法用于打印输出,最python中常见的一个函数. 在交互环境中输入help(print)指令,可以显示print()函数的使用方法. >>> help(pri ...

  5. 强化学习-学习笔记12 | Dueling Network

    这是价值学习高级技巧第三篇,前两篇主要是针对 TD 算法的改进,而Dueling Network 对 DQN 的结构进行改进,能够大幅度改进DQN的效果. Dueling Network 的应用范围不 ...

  6. wcf连接数据库用sqlhelper,连接数一直没有释放反而增加

    找了一天,发现原因是配置的连接字符串没有加上最大连接数,所以每次请求都是一直增加,而MariaDB默认的连接数是151,为了本地多项目测试已改成以前. 下面是配置的连接字符串:  <add na ...

  7. c:找到出现次数最多的递增数字串

    如题,如何在一亿位整数组成的字符串中找到出现次数最多的递增数字串? 答案: #include <stdio.h> #include <string.h> #define MAX ...

  8. 基于 Hexo 从零开始搭建个人博客(五)

    阅读本篇前,请先阅读前几篇文章: 基于 Hexo 从零开始搭建个人博客(一) 基于 Hexo 从零开始搭建个人博客(二) 基于 Hexo 从零开始搭建个人博客(三) 基于 Hexo 从零开始搭建个人博 ...

  9. SQL语句的整合

    基础语法 https://blog.csdn.net/m0_37989980/article/details/103413942 CRUD 提供给数据库管理员的基本操作,CRUD(Create, Re ...

  10. CentOS 定时计划任务设置

    一.安装crontab服务并设置开机自启 yum install crontabs (centos默认就会带,一般不需要安装) systemctl enable crond (设为开机启动) syst ...