Vue核心技术-22,作用域插槽
本文共 842 字，大约阅读时间需要 2 分钟。
一,前言
作用域插槽是一种特殊的slot,使用一个可复用的模板替换已渲染元素由于作用域插槽相对较难理解,所以在这一篇进行单独介绍
二,作用域插槽
先看一个作用域插槽的例子,并和普通插槽对比:
作用域插槽传值 : {
{ props.msg }}
运行结果:
对比普通插槽:
在子组件模板中,元素上有一个类似props传递数据给组件的写法msg="xxx",将数据床底到了插槽父组件中使用了 元素,而且包含scope="props",props在这里只是临时变量,早template内可以通过临时变量props访问来自子组件插槽的数据msg
三,在列表组件使用作用域插槽
在列表组件中,使用作用域插槽:
书名:{ { props.bookName}}--售价:{ { props.bookPrice }}
运行结果:
子组件my-list绑定了父级(Vue实例)中data.books数组,为列表提供数据源在my-list子组件template中,设置slot名称并使用v-for遍历对象使用:book-name和:book-price绑定并输出数组对象的属性值,并暴露给外部插槽内容使用外部插槽内容,通过在template上定义slot名称并通过scope="props"使用子组件暴露的属性值最终完成对列表的遍历输出
对比v-for和作用域插槽的区别:
上边的例子直接在父组件使用v-for也可以实现遍历列表输出使用作用域插槽,既可以复用子组件的slot,又能使slot的内容不一致
四,结尾
关于作用域插槽的介绍就到这里了,下一篇介绍如何访问slot
你可能感兴趣的文章
【数据结构】动态顺序表
查看>>
Markdown的基础使用
查看>>
Linux基础命令
查看>>
【C语言】交换两个数值的三种方法
查看>>
【数据结构】栈的简单理解以及对栈的基本操作
查看>>
【数据结构】简单不带环迷宫的实现（用栈实现）
查看>>
【C语言】简单的了解递归（求斐波那契，n的阶乘，字符串长度，把一个整型（无符号），转化为字符型并打印出来）
查看>>
【数据结构】动态栈的实现
查看>>
【数据结构】简单的迷宫（用递归实现）
查看>>
【数据结构】队列的基本认识和队列的基本操作
查看>>
【数据结构】循环队列的认识和基本操作
查看>>
【LeetCode】无重复字符的最长子串
查看>>
时间复杂度
查看>>
【C++】动态内存管理 new和delete的理解
查看>>
【Linux】了解根目录下每个文件的作用
查看>>
【Linux】进程的理解（一）
查看>>
【Linux】进程的理解（二）
查看>>
【C语言】深度理解函数的调用（栈帧）
查看>>
【Linux】进程的理解（三）
查看>>
【C++】带头节点的双向线链表的实现
查看>>