vue作用域插槽详解,vue插槽详解
本文主要介绍Vue默认槽、命名槽和作用域槽的定义和用法。slot的作用是在子组件的某个位置插入父组件的自定义html结构和数据资料。以下细节可以咨询各位朋友。
目录
第一和第三插槽1的定义。默认插槽2。名为槽3。范围插槽2。用法1。默认插槽2。名为槽3。范围插槽应用场景：
槽的作用是在子组件的某个位置插入父组件的自定义html结构和数据data。
一、三种插槽的定义
插槽分为三种：
名为插槽作用域插槽的默认插槽
1.默认插槽
【定义：默认槽是将父组件的结构和数据插入子组件。默认插槽只有一个插入位置。要插入的html结构和数据必须在父组件中，但css可以在子组件中]
[描述：将父组件的自定义html和数据插入子组件的相应位置]
[功能：父组件决定结构和数据]
2.具名插槽
[定义：命名插槽类似于默认插槽，只是默认插槽只有一个插入位置，而命名插槽可以有多个插入位置]
[描述：将多个父组件的自定义html和数据插入子组件的多个位置]
[功能：父组件决定结构和数据]
3.作用域插槽
【定义：作用域槽的数据写在子组件中，根据父组件传入的html结构确定数据的html结构】
[描述：根据父组件中不同的html结构分析数据中的数据]
【特点：子组件决定数据，父组件决定结构】
二、使用方法
1.默认插槽
父组件：
模板
孩子！- Child是子组件标签-
！-插槽内容-
要插入的模板html内容/模板
/孩子
/模板
子组件：
模板
差异
！-插槽位置-
当插槽未被调用时，将显示此内容。/插槽
/div
/模板
2.具名插槽
父组件：
模板
孩子！- Child是子组件标签-
！-插槽内容-
模板slot=header 要插入的html内容1/template
模板槽=中心要插入的html内容2/模板
模板slot=footer 要插入的html内容3/template
/孩子
/模板
子组件：
模板
差异
！-插槽位置-
Slot name=header slot未被调用时将显示/slot
当slot name=center slot未被调用/slot时，将显示此内容
当slot name=footer slot未被调用/slot时，将显示此内容
/div
/模板
3.作用域插槽
父组件：
模板
孩子！- Child是子组件标签-
！-插槽内容-
模板slot=header
span v-for= m in data . msg :key= m /span
/模板
模板槽=中心
div v-for= m in data . msg :key= m /div
/模板
模板槽=页脚
标签v-for= m in data . msg :key= m /label
/模板
/孩子
/模板
子组件：
模板
差异
！-插槽位置-
Slot :msg=msg slot未被调用时将显示/slot
/div
/模板
脚本
导出默认值{
姓名：孩子，
//公共数据
data() {
返回{
味精：[火锅，红烧肉，烤羊腿]
}
}
}
/脚本
这就是本文关于Vue默认槽、命名槽、作用域槽的定义和用法。请搜索我们以前的文章或继续浏览下面的相关文章，以获得更多关于Vue插槽定义的信息。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。