vue中的插槽（slot）

vue中有3种插槽

1、默认插槽

<slot></slot>

2、具名插槽

 <slot name="名称"></slot>

3、作用域插槽

<slot ：自定义 name = data 中的属性对象></slot>

vue中的插槽指的是子组件提供给父组件使用的一个占位符
用标签表示，父组件可以在这个占位符中填充任何模板代码
比如html、组件等，填充的内容会替换掉子组件的标签（替换占位符）

1.默认插槽
在子组件中放置一个占位符（slot）

<slot></slot>export default {
name:'classList'
}

在父组件中引用这个子组件，并给这个占位符填充内容

<classList>内容</classList>

2.具名插槽
在子组件中有两个地方需要插槽（两个slot）
具名插槽就是给子组件中的插槽取一个名字，而父组件就可以引用子组件的时候，根据名字对号入座，将相对应的内容填充到相对应的插槽中

<slot name="名称"></solt>在子组件放两个具名插槽
<slot name="one"></slot>
<slot name="two"></slot>
export default {
name:'classList'
}

在父组件中引用该子组件，并通过v-slot:[name]的方式将相对应的内容填充到相应的插槽中

<classList><template v-slot:one>内容</template><template v-slot:two>内容</template>
</classList>

3.作用域插槽
作用域插槽就是带参数（数据）的插槽，强调的则是数据作用的范围
在子组件的插槽中带入参数（数据）提供给父组件使用，该参数（数据）仅在插槽内有效，父组件可以根据子组件中传过来的插槽参数（数据）对展示内容进行定制
slot:自定义name=data中的属性或对象
在子组件中放置一个带参数（数据）的插槽

<slot :isAllwo = "isAllwo"></slot>
export default{
name:'classList',
data(){
return{
isAllwo:{
one:'one',
two:'two'
}
}
}
}

在父组件中引用该子组件，并通过 slot-sccope 来接受子组件的插槽中传过来的参数和使用该数据

<classList>
<template slot-scope="isAllwo">
{{isAllwo.isAllwo.one}}
</template>
</classList>

页面展示的作用域插槽参数值是one

因为在template的{{}}是支持表达式的，这个时候就可以利用子组件传过来的参数值的不同进行页面内容的定制

<classList>
<template slot-scope="isAllwo">
{{isAllwo.isAllwo.one || '空值'}}
</template>
</classList>

页面展示的作用域插槽参数值是空值

vue中的插槽（slot）相关推荐

vue中的插槽--slot和v-slot
今天团队内部有一个技术分享会,主要是vue进阶这一块,我对插槽slot的认识还不清晰,于是就总结一下什么是插槽? 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容, ...
理解vue中的插槽------slot与slot-scope-已整理
vue当中的插槽,指的即是slot,是组件当中的一块HTML模板.该模板是否显示,以及如何显示由其父组件说了算.不过插槽显示的位置是由子组件决定 ,你将slot写在组件template的哪块,父组件传 ...
细讲Vue中的插槽slot
一.插槽是什么下面看一个例子写一个父组件: test.vue <template><div><div>我是父组件</div><myslot&g ...
vue 中的插槽Slot基本使用和具名插槽
一.插槽Slot的作用 1.为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定的div.span等等这些元素: 2.比如某些情况下我们使用组件,希望组件显示的是一个按钮,某种情况下我们使 ...
Vue在渲染函数createELement和JSX中使用插槽slot
Vue对于插槽有两个专门的APIvm.$slots和vm.$scopedSlots,分别是普通插槽和作用域插槽,使用JSX语法或渲染函数的时候,定义插槽将使用上述两个API. 渲染函数createEl ...
Vue中的Ajax②(slot插槽)
文章目录案例引入默认插槽具名插槽作用域插槽总结案例引入我们现在有一个需求: 代码: App组件: <template><div class="containe ...
vue中v-solt插槽的使用
具名插槽slot与v-solt插槽使用插槽分成两步. 第一步在组件元素内.为其它元素设置插槽名称. 通过slot属性设置. 第二步在组件模板中,通过slot组件,使用这些元素. 通过name属性 ...
Vue学习Day6 插槽slot使用、编译作用域、作用域插槽、模块化开发、webpack介绍、安装
想利用暑假时间好好学习一下vue,会记录每一天的学习内容. 今天是学习vue的第6天! 起起伏伏乃人生常态,继续加油- 学习内容 1. 插槽slot slot基本使用具名插槽slot 2. 编译作用 ...
slot传函数 vue_vue中的插槽slot理解
本篇文章参考赛冷思的个人博客 1.函数默认传参在我们写js函数我们的可能会给他们一个默认的参数,写法是 functionshow(age,name){var age = age || 20;var ...

vue中的插槽（slot）

vue中有3种插槽

vue中的插槽（slot）相关推荐

最新文章

热门文章