Vue——slot的含义是什么， slot之详细解释

slot 英文的意思是“插槽”的意思，vue用这个词做标签，意思是能够在这个标签里插入一些东西，是由调用组件（父组件）向其调用的子组件里插入一些东西的一个解决办法。

slot的语法如下：

<slot></slot>

以上这段代码是书写在需要支持插入能力的子组件里的，有了这段标签代码后，子组件就支持父组件向其内部插入东西了。

一个支持slot的子组件的模板html如下：

<template><div class="slot-child"><div><slot>在这个地方可以调用者可以插入东西</slot></div><span>子组件里的其它内容</span><span>{{ message }}</span></div>
</template><script>
export default {name: 'subcomponent',data () {return {message: "我自己的消息"}}
}
</script>

调用subcomponent组件的符组件如果需要在子组件里面插入一些东西，父组件必须在调用子组件的地方输入标签，即在子组件的名称标签里写标签或文本内容。

一个父组件的样本代码如下：

<template><div class="slots"><div>父组件自己的内容</div><!-- subcomponent 标签之间的内容将插入到子组件的slot标签里  --><subcomponent><div class="no-name">这个文字将会插入到子组件里</div></subcomponent></div>
</template><script>
import subcomponent from 'component/Subcomponent'
export default {name: 'caller',components:{subcomponent},data () {return {}}
}
</script>

可以在子组件里书写多个slot标签，如果这些slot标签不添加name属性，则就是说这些slot不具有名称，这些slot插槽将插入父组件调用子组件时书写在子组件标签中没有 slot的标签的内容。

一个具名子组件的样本如下：

<div class="sub-item"><slot><p>如果父组件没用插入内容,我将作为默认出现</p></slot><div><slot name="xxx"><p>如果父组件没用插入内容,我将作为默认出现xxx</p></slot></div>
</div>

父组件的调用具名slot的子组件的代码如下：

<div class="my">我自己的东西</div><child-component><p>插入到子组件里的内容，不具名</p><p slot="xxx">插入到子组件XXX slot里的内容</p><p>插入到子组件里的内容，不具名0000</p><p>插入到子组件里的内容，不具名2222</p>
</child-component>

一个包含具名slot的单文件slot的测试样本如下

这是一个独立的完整文件，可以直接复制->粘贴->另存为文件到web目录下做测试：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue之slot示例</title>
</head>
<body><div id="app"><div class="my">调用组件自己的东西</div><!-- 子组件child-component标签内 没有任何内容 --><child-component></child-component><!-- 子组件child-component标签内 有内容，将插入到子组件的slot处 --><child-component><p>插入到子组件里的内容，不具名</p><!-- 将插入到子组件的具名xxx的slot处 --><p slot="xxx">插入到子组件具名xxx的slot里的内容</p><p>插入到子组件里的内容0000，不具名</p><p>插入到子组件里的内容2222，不具名</p></child-component><child-component2><p>插入到子组件里的内容2</p><p slot="xxx">插入到子组件XXX slot里的内容2</p></child-component2></div><script src="https://unpkg.com/vue/dist/vue.min.js"></script><script>Vue.component('ChildComponent', {template: '\<div class="sub-item">\<slot>\<p>父组件调用我时标签内没用插入任何内容</p>\</slot>\<div><slot name="xxx">\<p>父组件调用我时没有 slot="xxx" 的标签或者标签内没用插入任何内容</p>\</slot></div>\</div>'});Vue.component('ChildComponent2', {template: '\<div class="sub-item">\<slot>\<p>父组件调用我时标签内没用插入任何内容</p>\</slot>\<slot name="xxx">\<p>父组件调用我时没有 slot="xxx" 的标签或者标签内没用插入任何内容</p>\</slot>\</div>'});var app = new Vue({el: '#app'})</script><style>.sub-item {border: 1px solid #ccc;padding: 20px 30px;margin: 20px;}.my {border: 1px solid #ddd;padding: 10px 30px;margin: 10px 20px;}</style>
</body>
</html>

如果没有指定默认的匿名slot, 父组件调用子组件时子组件名称标签标签内的内容片段都将被丢弃。

Vue——slot的含义是什么， slot之详细解释相关推荐

vue slot scope使用_20、slot插槽的用法
重点: 单个插槽.具名插槽.作用域插槽的用法: 访问插槽的方法. 其实本小白对插槽理解的还不深,哪些场景会经常用到插槽也不了解. 但是本着"大胆猜测"的理念,我的猜测如下: 假设有 ...
[vue] 说说你对slot的理解有多少？slot使用场景有哪些？
[vue] 说说你对slot的理解有多少?slot使用场景有哪些? 通过插槽可以让用户可以拓展组件,去更好地复用组件和对其做定制化处理如果父组件在使用到一个复用组件的时候,获取这个组件在不同地方有少量 ...
【Verilog语法】PC-relatve branch 以及 Delay Slot 的含义
简单来说,PC-relatve 是PC相对寻址.与之相反的是绝对寻址(在当前PC所在的region中寻址) [讨论] 谈谈SH系列的 Delay Slot 延迟槽和 branch指令今天在调试SH ...
vue组件-使用插槽分发内容(slot)
slot--使用插槽分发内容(位置.槽口:作用: 占个位置) 官网API: https://cn.vuejs.org/v2/guide/components.html#使用插槽分发内容使用组件时,有 ...
vue2到vue3中插槽slot变化详解---从slot，slot-scope到v-slot的变化
文章目录前言默认插槽具名插槽作用域插槽解构prop的写法 v-solt 默认插槽独占默认插槽 v-solt具名插槽 v-solt作用域插槽解构props的写法动态插槽名插槽的缩写前 ...
QT线程 Emit、Sgnals、Slot详细解释
本文详细的介绍了QT中如何发送信号.如何接收信号.Emit.Sgnals.Slot的具体使用方法.信号和槽机制是 QT 的核心机制,要精通 QT 编程就必须对信号和槽有所了解.信号和槽是一种高级接口, ...
MATLAB中var函数，mean函数的含义及用法详细解释
MATLAB中var函数,mean函数的含义及用法详细解释 var函数语句我们先来看var函数,MATLAB命令窗输入help var ,可以得到用到方差函数Syntax有: V = var(X); ...
linux中shutdown命令的含义,Linux中的shutdown命令的详细解释
linxu下的shutdown命令是一个关机命令.下面由学习啦小编为大家整理了linux的shutdown命令的详细解释的相关知识,希望对大家有帮助! 一.Linux中的shutdown命令的详细解释 ...
vue生命周期，组件，slot替换，tab切换，简易留言板
data规范: data:(){ return{ arr:[{ a: "wan1", b: "在线", c: 5000},{ a: "wan2&quo ...