vue中插槽solt的使用

solt就是插槽默认会把组件中间的内容渲染出来

案例：

在app.vue中直接在组件模版里写内容是不会在页面中显示的

这个时候就在card子组件里写上solt标签 solt标签就代表根组件里那个div

运行结果：

具名插槽

card文件：

<template><div><div class="header"><p>我是卡片</p></div><div class="body"><slot></slot></div></div>
</template>

在app.vue中写两个div 则都会显示在类名body里

如果想要把第一段div里内容显示在header里就可以使用具名插槽

此时只需要在插槽里给一个名字即可

<!--card.vue-->
<template><div><div class="header"><slot name="headers"></slot><p>我是卡片</p></div><div class="body"><slot></slot></div></div>
</template>

vue中插槽solt的使用相关推荐

vue 中的solt插槽
插槽的种类: 插槽分为3种,一种是默认插槽.一种是具名插槽.一种是作用域插槽. 插槽的定义: 在子组件中用 <solt></solt> 划出一块区域用来显示父组件中的页面结构, ...
【Vue 快速入门系列】3分钟掌握Vue中插槽的使用与理解
文章目录前言一.常规实现方式二.匿名插槽三.具名插槽四.作用域插槽前言插槽作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件 ===> 子 ...
vue 中插槽的三种类型
vue中的slot主要分三种 :匿名插槽,具名插槽,作用域插槽一,匿名插槽: 语法:<slot></slot> 1.没有为插槽指定名称 2.通过slot标签可以添加匿名插槽 ...
Vue中的solt插槽
一.概念: 插槽就是父组件往子组件中插入一些内容. 二.插槽的种类: 有三种方式,默认插槽,具名插槽,作用域插槽默认插槽就是把父组件中的数据,显示在子组件中,子组件通过一个slot插槽标签显示父组件 ...
vue 组件插槽solt 的使用
最近在写项目时接触到了这个组件,所以这次的blog想要记录下当时的问题. 场景: 在列表筛选时,情况一,页面显示出筛选的列表内容,情况二,页面显示"暂无该筛选信息!",所以想要做出 ...
Vue中插槽slot的使用
插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题在这里就点出来了,是显示不显示和怎样显示. 由于插槽是一块模板,所 ...
Vue中插槽-----特殊特性slot、slot-scope与指令v-slot的使用方法
1.slot作用/概念:预先将将来要使用的内容进行保留: 2.具名插槽:给slot起个名字 3.slot.slot-scope已经被废弃推荐使用vue2.6.0中的v-slot:但是这边还是对新旧方法 ...
vue中获取/操作组件中的dom元素
最近刚做了一个项目,需要用到地图,选择的是腾讯地图,创建地图的时候,需要给地图创建函数中传入地图容器的id或者容器的dom元素,但是在调试过程中,发现怎么都无法获取dom元素,直接通过getEleme ...
Vue中slot与slot-scope的理解及使用
以前使用过vue,但是从来没有用过插槽slot,最近突然看到slot,发现有点不会用,因此决定系统的学习一下插槽slot. 但是在查看了vue文档后,感觉说的太笼统,让人难以理解,因此在网上查了很多资 ...

vue中插槽solt的使用

具名插槽

vue中插槽solt的使用相关推荐

最新文章

热门文章