-
Vue2插槽的简单使用示例
插槽-slot
- 基本使用
- 作用域插槽
- 具名插槽
1. 基本使用
比较简单, 比如:
xxxx 父页面使用--不用获取slotdemo组件里面的数据的时候:
xxxxx 2. 作用域插槽
1) scope 只可以用于 元素，其它和 slot-scope 都相同（已被移除）。
2) slot-scope 用于将元素或组件表示为作用域插槽，可以接收传递给插槽的 prop 。（在 2.5.0+ 中替代了 scope，自 2.6.0 起被废弃）
3) 推荐使用v-slot，默认插槽只传递参数v-slot="xxx"3. 具名插槽
1) 用于 元素, v-slot:名字="xxx"
2) 或者#名字
使用示例:
子页面:
- <template>
- <div>
- <header>
- <slot name="header">具名插槽-header</slot>
- </header>
- <main>
- <slot :slotData="slotData">
- 作用域插槽 :slotData="slotData"方便父页面获取插槽数据
- </slot>
- </main>
- <footer>
- <slot name="footer">具名插槽-footer</slot>
- </footer>
- </div>
- </template>
- <script>
- export default {
- data () {
- return {
- slotData: {
- title: 'title-aaa'
- }
- }
- }
- }
- </script>
父页面:
- <template>
- <div class="a-box">
- <NameSlot>
- <!-- 具名插槽 -->
- <template v-slot:header>
- <div>头部---</div>
- </template>
- <!-- 作用域插槽: 方便获取插槽的数据 -->
- <template v-slot="slotProps">
- <div>{{ slotProps.slotData.title }}</div>
- </template>
- <!-- 具名插槽 -->
- <template #footer>
- <div>底部----</div>
- </template>
- </NameSlot>
- </div>
- </template>
- <script>
- import NameSlot from './Slot1'
- export default {
- components: {
- NameSlot
- }
- }
- </script>
- <style lang="css" scoped>
- .a-box {
- width: 300px;
- height: 300px;
- background-color: red;
- font-size: 33px;
- }
- </style>
-
相关阅读:
git使用介绍
C指针与一维二维数组、数组指针与指针数组、函数指针_数组的理解使用
Qt基于paintEvent自定义CharView
【ACWing】3429. 全排列
C++ Reference: Standard C++ Library reference: C Library: cwctype: iswalnum
进程间通信(IPC)的方法:UNIX域套接字
Jcmsuite：旋转对称发射器
过关斩将法：验证输入的用户信息：
国际视频编解码标准提案下载地址
jmeter界面压测过程卡死解决思路
- 原文地址：https://blog.csdn.net/qq_42750608/article/details/133595416
