一、slot是什么？

slot卡槽可以分为具名卡槽和默认卡槽，默认卡槽直接写在组件内部并插入到内容区域

二、使用步骤

1.公共组件BaseCard封装

代码如下（示例）：

<template><div :class="['base-card', cardType === 'sub' ? 'sub' : 'main']" :style="{ width, height }"><div class="card-top"><slot name="top-control"><span class="title">{{ title }}</span></slot></div><div class="content"><slot>内容</slot></div></div>
</template>
<script>
export default {name: "base-card-2",props: {width: {type: String,default: "100%",},height: {type: String,},title: {type: String,default: "标题",},cardType: {type: String,default: "main",validator: function (value) {// 这个值必须匹配下列字符串中的一个return ["main", "sub"].includes(value);},},},
}
</script>

2.父组件引入

代码如下（示例）：

（1）默认卡槽的使用

<template><BaseCard class="taxAnalysis-container" title="税务分析" cardType="sub"></BaseCard>
</template>
<script>
import BaseCard from "@/baseComponets/baseCard.vue";

（2）具名卡槽的使用

<template><BaseCard class="taxAnalysis-container" title="税务分析" cardType="sub"><template #top-control><div>头部企业排名</div><el-selectv-model="value"placeholder="选择时间"popper-class="select-popper-copy"style="margin-right:20px;"><el-option label="500w以下" value="500万以下"></el-option></el-select></template></BaseCard>
</template>
<script>
import BaseCard from "@/baseComponets/baseCard.vue";

总结

这个例子组件默认卡槽时如下

但是组件有时又会有些许差异，比如会在最右边多一点东西，比如一个下拉框,这是就会使用具名卡槽

slot卡槽封装公共组件相关推荐

ts引入公共方法_angular 封装公共方法
angular封装公共方法到service中间件,节省开发时间 layer.service.ts openAlert(callback) {// 传递回调函数 const dialogRef = th ...
slot具名卡槽和props
App.vue代码 <template><div id="app"><StuPropsVue :name="name" :age= ...
vue公共组件封装及传值
Vue组件的三要素 1. props参数 2. slot定制插槽 3. event自定义事件基本组件开发创建一个.vue文件,其中包含template.script以及style: <tem ...
第十一篇: 使用ElementUi 卡片封装一个季度选择器公共组件，可直接使用
本篇主要内容:ElementUi 只提供了时间.日历等选择器,没有提供季度选择器,但在开发中报表的时候用到了季度选择器.需要换切换多种类型(年报.月报.季报), 于是封装一个季度公共组件,大家可按需修 ...
Vue公共组件的封装
Vue组件的三要素 1. props参数 2. slot定制插槽 3. event自定义事件基本组件开发创建一个.vue文件,其中包含template.script以及style: <tem ...
Egret之龙骨卡槽(slot)换皮
龙骨的图片是绑定在卡槽上的.并且是一对一的关系.所以可以通过对骨架的卡槽上绑定的图片的更换来实现另一种换皮的效果. 换皮的核心代码: //针对slot设置其新内容private setNewSlot( ...
vue uni-app 公共组件封装，防止每个页面重复导入
1.公共插件实现目标,将公共组件或者网络请求直接在this中调用,不需要再页面引用 #例如网络请求 var _this = this;this.api.userInfo({token: ''}#通用 ...
java 公共组件_GitHub - XiaoMaoGuai/zxy-commons: java公共组件：对java开发中大部分公共代码进行了封装。...
zxy-commons公共组件说明依赖说明: 项目依赖于zxy-commons-bom,请下载zxy-commons-bom后并执行./gradlew publishToMavenLocal安装到本 ...
[Vue] 组件卡槽的使用
SLOT 例子参考代码:code 实现功能: 两种方法实现父组件往子组件中传入DOM节点 1. 属性传值(不推荐) 2. Slot插槽使用 (推荐) 属性传值(不推荐) 思路(注意:这是一个错误例子 ...

slot卡槽封装公共组件

前言

一、slot是什么？

二、使用步骤

1.公共组件BaseCard封装

2.父组件引入

总结

slot卡槽封装公共组件相关推荐

最新文章

热门文章