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>

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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐