目录一、三种插槽的定义1.默认插槽2.具名插槽3.作用域插槽二、使用方法1.默认插槽2.具名插槽3.作用域插槽应用场景： 插槽的作用是在子组件中某个位置插入父组件的自定义html结构
应用场景：
插槽的作用是在子组件中某个位置插入父组件的自定义html结构和data数据
插槽分为三种：
【定义：默认插槽是将父组件的结构和数据插入子组件中，默认插槽只有一个插入位置，要插入的html结构和data数据必须在父组件中，不过CSS可以在子组件中】
【简述：将父组件的自定义html和data插入子组件的对应位置】
【特点：父组件决定结构和数据】
【定义：具名插槽和默认插槽类似，只是默认插槽只有一个插入位置，具名插槽可以有多个插入位置】
【简述：将多个父组件的自定义html和data插入子组件的多个位置】
【特点：父组件决定结构和数据】
【定义：作用域插槽的data数据固定写在子组件中，数据的html结构根据父组件传入的html结构来决定】
【简述：根据父组件中不同的html结构解析data中的数据】
【特点：子组件决定数据，父组件决定结构】
父组件：
<template>
<Child> <!-- Child为子组件标签 -->
<!-- 插槽内容 -->
<template>要插入的html内容</template>
</Child>
</template>
子组件：
<template>
<div>
<!-- 插槽位置 -->
<slot>插槽未被调用时会显示此内容</slot>
</div>
</template>父组件：
<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>父组件：
<template>
<Child> <!-- Child为子组件标签 -->
<!-- 插槽内容 -->
<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>到此这篇关于Vue默认插槽,具名插槽,作用域插槽定义及使用方法的文章就介绍到这了,更多相关Vue插槽定义内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
--结束END--
本文标题: Vue默认插槽,具名插槽,作用域插槽定义及使用方法
本文链接: https://www.lsjlt.com/news/144256.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0