vue3作用域插槽,vue 具名插槽与作用域插槽同时使用
摘要：本文主要介绍了vue示波器槽、槽、v型槽、槽式示波器的详细说明，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
vue slot slot和named slot scope slot是说明子组件父组件渲染的核心功能。
vue 插槽slot和具名插槽
该函数在调用组件时传递一些DOM结构，
不同点是：命名槽在传递DOM时需要声明，传递给哪个槽名？
它们的用法很简单，这里就不赘述了。
重点说一下作用域插槽 slot-scope 的使用，以及vue2.6.X开始的新语法v-slot
作用域插槽的核心作用是
子组件给父组件传递数据，当然也包含上述插槽的能力
旧版本作用域插槽，
Slot=test :指定插槽的名称可以用prop:任意定义，它表示子组件传递的有价值的对象。您可以通过解构复制{row，index}来接受模板slot= test slot-scope= prop
{{ prop.wife.a }}
/模板
新版本是这样的。可以说语法更清晰了。
v-slot命令直接跟在插槽名称后面，prop同上。
模板v-slot:test=prop
{{ prop.wife.b }}
/模板
实例说明
子组件
我在这里定义了几个命名槽，并试图将它们与来自父组件的数据一起传递回去。
模板
差异
插槽：用户=用户
！-当父组件使用辅助作用域插槽时，默认显示的值将被覆盖-
{{ user.age }}
/插槽
插槽名称=测试:妻子=妻子
{{wife.a}}
/插槽
插槽名称=hasProps :baseData=baseData
{{baseData.a_count}}
/插槽
/div
/模板
脚本
导出默认值{
道具：{
基础数据：{
类型：对象，
默认值：()={
返回{
a_count: 0，
b_count: 0，
c_count: 0，
d_count: 0，
e_count: 0，
订单_金额：0，
订单编号：0，
资源数量：0
}
}
}
},
data () {
返回{
用户：{
姓名：张三，
年龄：20岁
},
妻子：{
答：“小李”，
乙：“韩笑”
}
}
}
}
/脚本
父组件
代码的一部分：
其中，baseData为服务器异步返回数据。
差异
儿童
模板v-slot:default=prop
{{ prop.user.age }}
/模板
模板v-slot:test=prop
{{ prop.wife.b }}
/模板
/孩子
儿童
模板插槽-scope=prop
{{ prop.user.name }}
/模板
模板slot=“测试”slot-scope=“属性”
{{ prop.wife.a }}
/模板
/孩子
！-试着解构这个任务-
子级：baseData=baseData
模板v-slot:has props=“{ base data }”
{{ baseData.a_count }}
/模板
/孩子
/div
效果图
这两种方法都是先注释掉all child中所有代码的效果，前者是在接口返回之前。
这是正面和背面的图片，没有评论。
可以看出，
vue2.6支持这两种模式，但官方表示3.0只支持v槽指令。
如果不使用范围槽，将显示默认值。使用后，遵循父组件的。
可以先动态更新数据。
用过element-ui的人，只要你用过表格，我想你现在应该明白作用域槽有多有用了。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。