【Vue学习笔记】 Vue默认插槽、具名插槽、作用域插槽
插槽的作用是在子组件中某个位置插入父组件的自定义html结构和data数据插槽分为三种:默认插槽 具名插槽 作用域插槽1.默认插槽定义: 默认插槽是将父组件的结构和数据插入子组件中,默认插槽只有一个插入位置,要插入的html结构和data数据必须在父组件中,不过css可以在子组件中简述: 将父组件的自定义html和data插入子组件的对应位置特点: 父组件决定结构和数据2.具名插槽定义: 具名插槽
·
应用场景
插槽的作用是在子组件中某个位置插入父组件的自定义html结构和data数据
三种插槽的定义
插槽分为三种:
默认插槽 具名插槽 作用域插槽
1.默认插槽
定义: 默认插槽是将父组件的结构和数据插入子组件中,默认插槽只有一个插入位置,要插入的html结构和data数据必须在父组件中,不过css可以在子组件中
简述: 将父组件的自定义html和data插入子组件的对应位置
特点: 父组件决定结构和数据
2.具名插槽
定义: 具名插槽简单地说就是具有名字的插槽,只是默认插槽只有一个插入位置,具名插槽可以有多个插入位置,根据名字来识别对应的插槽
简述: 将多个父组件的自定义html和data插入子组件的多个位置
特点: 父组件决定结构和数据
3.作用域插槽
定义: 作用域插槽的data数据固定写在子组件中,数据的html结构根据父组件传入的html结构来决定
简述: 根据父组件中不同的html结构解析data中的数据
特点: 子组件决定数据,父组件决定结构
使用方法
1.默认插槽
父组件
<template>
<Child> <!-- Child为子组件标签 -->
<!-- 插槽内容,可以是template标签也可以是其他标签,比如<img src="图片地址" /> -->
<template>要插入的html内容</template>
</Child>
</template>
子组件
<template>
<div>
<!-- 插槽位置 -->
<!-- 插槽通俗的说就是:挖个坑,等组件的使用者进行填充-->
<slot>这里可以写默认值,当使用者没有传递具体结构时,会显示此内容</slot>
</div>
</template>
2.具名插槽
父组件
<template>
<Child> <!-- Child为子组件标签 -->
<!-- 插槽内容 -->
<template slot="header">要插入的html内容1</template>
<template slot="center">要插入的html内容2</template>
<template slot="footer">要插入的html内容3</template>
</Child>
</template>
子组件
<template>
<div>
<!-- 插槽位置 -->
<slot name="header">插槽未被调用时会显示此内容</slot>
<slot name="center">插槽未被调用时会显示此内容</slot>
<slot name="footer">插槽未被调用时会显示此内容</slot>
</div>
</template>
3.作用域插槽
父组件
<template>
<Child> <!-- Child为子组件标签 -->
<!-- 插槽内容,作用域插槽必须要写template -->
<template slot="header">
<span v-for="m in data.msg" :key="m"></span>
</template>
<template slot="center">
<div v-for="m in data.msg" :key="m"></div>
</template>
<template slot="footer">
<label v-for="m in data.msg" :key="m"></label>
</template>
</Child>
</template>
子组件
<template>
<div>
<!-- 插槽位置 -->
<!-- 插槽的结构是由使用者决定的-->
<slot :msg="msg">插槽未被调用时会显示此内容</slot>
</div>
</template>
<script>
export default {
name: 'Child',
// 公用数据
data() {
return {
msg: ["火锅", "红烧肉", "烤羊腿"]
}
}
}
</script>
原文链接
https://blog.csdn.net/weixin_43721000/article/details/123630524
更多推荐
已为社区贡献1条内容
所有评论(0)