分类：slot

2022
06-10

JavaScript--在Vue中使用插槽:slot

目录在Vue中使用插槽：slot作用域插槽：使用template标签包裹总结在Vue中使用插槽：slot1、在子组件的template里可以直接使用slot标签<slot></slot>，它可以显示父组件向子组件插入的内容。2、slot标签里面可以写一些默认值，当父组件没有插入内容的时候它就会显示默认值，插入内容时就只显示插入的内容。3、当使用多个slot标签时，直接插入多个内容时，每个slot标签内都会包括所有插入的内容。可以通过slot属性给插入的不同内容设... 继续阅读 >
2022
02-10

Vue+tsx使用slot没有被替换的问题

Vue+tsx使用slot没有被替换的问题 目录前言发现问题解决后记前言最近自己准备写一个UI组件，想对vue的2.x、3.x可以更深层次的掌握在架构时，准备全部使用tsx书写组件但遇到了tsx中使用slot的问题发现问题先写了一个基础的card组件：card.tsx:importComponentfrom'vue-class-component'importVanUIComponentfrom'@packs/common/VanUIComponent'import{VNode}from'vue'import{Prop}from'vue-property-decorator'import{CardShadowEnu... 继续阅读 >
2021
05-09

Vue中slot-scope的深入理解（适合初学者）

百度上已经有很多的关于slot-scope的文章，但我感觉都是那些以前没学好，又回头学的人，他们都使用了.Vue文件，我觉得有点不适合初学者，所以我就写一篇适合初学者的。先抛例程：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>组件之通过插槽(slot)分发内容</title><scriptsrc="你的vue地址，请下载最新版的"></script><script>Vue.component("test-slot",{//插槽允许... 继续阅读 >
2020
10-10

v-slot和slot、slot-scope之间相互替换实例

如果组件文档里面用的是v-slot，而你用的是vue2.6之前的版本，则需要替换v-slot：所以有两种替换方式，注意看两块v-slot有啥不同，你就知道你该怎么用slot-scope和slot来替换文档中的v-slot了v-slot使用方式1：<templatev-slot:operate="{row}"><template>则可替换为：<templateslot="operate"slot-scope="{row}"></template>v-slot使用方式2：<templatev-slot="{row}"><template>则可替换为：<templateslot-scope="row... 继续阅读 >
2020
10-10

Vue插槽_特殊特性slot,slot-scope与指令v-slot说明

Vue插槽_特殊特性slot,slot-scope与指令v-slot说明 1、slot作用/概念：预先将将来要使用的内容进行保留；2、具名插槽：给slot起个名字3、slot、slot-scope已经被废弃推荐使用vue2.6.0中的v-slot；但是这边还是对新旧方法对做一下使用说明。slot插槽(不具名)<body><divid="app"><Test><div>slot插槽占位内容</div></Test></div><templateid="test"><div><slot></slot>//定义插槽<h3>这里是test组件</h3></div></template></body><script>Vue.component('Tes... 继续阅读 >