10.vue学习笔记(组件数据传递-props回调函数子传父+透传Attributes+插槽slot)

本文主要是介绍10.vue学习笔记(组件数据传递-props回调函数子传父+透传Attributes+插槽slot),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

        • 1.组件数据传递
        • 2.透传Attributes(了解)
          • 禁用Attributes继承
        • 3.插槽slot
          • 3.1.插槽作用域
          • 3.2.默认内容
          • 3.3.具名插槽
          • 3.4.插槽中的数据传递
          • 3.5.具名插槽传递数据

1.组件数据传递
我们之前讲解过了组件之间的数据传递,props 和 自定义事件 两种方式
props:父传子
自定义事件:子传父
props通过额外方式实现子传父(回调函数)原理:实际上还是父传子 父传给子一个函数 子级实现函数的时候回传了一个数据

在这里插入图片描述

<template><h3>ComponentA</h3><ComponentB :title="title" :onEvent="dataFn"/><p>{{ msg }}</p>
</template>
<script>
import ComponentB from './ComponentB.vue'
export default{data(){return{title:"标题",msg:""}},components:{ComponentB},methods:{dataFn(data){console.log(data);this.msg = data;}}
}
</script>
————————————————————————————————————————————————————————————————————————————————
<template><h3>ComponentB</h3><p>{{ title }}</p><p>{{ onEvent('传递数据') }}</p>
</template>
<script>
export default{data(){return{}},props:{title:String,onEvent:Function}
}
</script>
2.透传Attributes(了解)
是指传递给一个组件,却没有被该组件声明为props或者emits的attribute或者v-on事件监听器。最常见的例子就是class,style和id当一个组件以单个元素为根作渲染时,透传的attribute会自动被添加到根元素上

在这里插入图片描述

禁用Attributes继承
export default{//禁止继承inheritAttrs:false
}
3.插槽slot
我们已经了解到了组件能够接受任意类型的js值作为props,但组件要如何接收模板内容呢?
在某些场景中,可能想要为子组件传递一些模板片段(div,a标签等),让子组件在它们的组件中渲染这些片段

在这里插入图片描述

<template><SlotsBase><div><h3>插槽标题</h3><p>插槽内容</p></div></SlotsBase>
</template>
<script>
import SlotsBase from "./components/SlotsBase.vue";export default{components:{SlotsBase}
}
</script>
<style></style>
————————————————————————————————————————————————————————————————————————————————
<template><h3>插槽知识</h3><slot></slot>
</template>
<slot>元素是一个插槽出口(slot outlet),标示了父元素提供的插槽内容将在哪里被渲染
3.1.插槽作用域
插槽内容可以访问到父组件的数据作用域,因为插槽内容本身是在父组件模板中定义的

在这里插入图片描述

3.2.默认内容
在外部没有提供任何内容情况下,可以为插槽指定默认内容

在这里插入图片描述

3.3.具名插槽

在这里插入图片描述

v-slot有对应的简写 # ,因此<template v-slot:header>可以简写为<template #header>。
意思就是将这部分摹本片段传入子组件的header插槽中
<template><Slot2Vue><template #header><h3>{{ msg }}</h3></template><template v-slot:main><p>内容</p></template></Slot2Vue>
</template>
<script>
import Slot2Vue from './components/Slot2.vue';
import SlotsBase from "./components/SlotsBase.vue";export default{data(){return{msg:"插槽内容2"}},components:{SlotsBase,Slot2Vue}
}
</script>
<style></style>
_______________________________________________________________________________________________________
<template><h3>slot2</h3><slot name="header">插槽默认值</slot><hr><slot name="main">插槽默认值</slot>
</template>
<script>
export default{data(){return{}}
}
</script>
3.4.插槽中的数据传递
在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。
要想做到这一点,我们需要一种方法来让子组件在渲染时将一部分数据提供给插槽
可以像对组件传递props那样,向一个插槽的出口上传递attributes

在这里插入图片描述

3.5.具名插槽传递数据

在这里插入图片描述

<template><SlotSAttrVue><template #header="slotProps"><h3>{{ currentTest }} - {{ slotProps.msg }}</h3></template><template #main="slotProps"><p>{{ slotProps.job }}</p></template></SlotSAttrVue>
</template>
<script>
import Slot2Vue from './components/Slot2.vue';
import SlotSAttrVue from './components/SlotSAttr.vue';
import SlotsBase from "./components/SlotsBase.vue";export default{data(){return{currentTest:"测试内容"}},components:{SlotsBase,Slot2Vue,SlotSAttrVue}
}
</script>
<style></style>
_______________________________________________________________________________________________________
<template><h3>Slots数据传递</h3><slot name="header" :msg="chiildMessage"></slot><slot name="main" :job="jobMessage"></slot>
</template>
<script>
export default{data(){return{//先传给父元素在<SlotSAttrVue> 再通过父元素在子元素slot中显示chiildMessage:"子组件数据",jobMessage:"VUE"}}
}
</script>

这篇关于10.vue学习笔记(组件数据传递-props回调函数子传父+透传Attributes+插槽slot)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/752302

相关文章

postgresql使用UUID函数的方法

《postgresql使用UUID函数的方法》本文给大家介绍postgresql使用UUID函数的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录PostgreSQL有两种生成uuid的方法。可以先通过sql查看是否已安装扩展函数,和可以安装的扩展函数

MySQL字符串常用函数详解

《MySQL字符串常用函数详解》本文给大家介绍MySQL字符串常用函数,本文结合实例代码给大家介绍的非常详细,对大家学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录mysql字符串常用函数一、获取二、大小写转换三、拼接四、截取五、比较、反转、替换六、去空白、填充MySQL字符串常用函数一、

MyBatis-Plus通用中等、大量数据分批查询和处理方法

《MyBatis-Plus通用中等、大量数据分批查询和处理方法》文章介绍MyBatis-Plus分页查询处理,通过函数式接口与Lambda表达式实现通用逻辑,方法抽象但功能强大,建议扩展分批处理及流式... 目录函数式接口获取分页数据接口数据处理接口通用逻辑工具类使用方法简单查询自定义查询方法总结函数式接口

C++中assign函数的使用

《C++中assign函数的使用》在C++标准模板库中,std::list等容器都提供了assign成员函数,它比操作符更灵活,支持多种初始化方式,下面就来介绍一下assign的用法,具有一定的参考价... 目录​1.assign的基本功能​​语法​2. 具体用法示例​​​(1) 填充n个相同值​​(2)

MySql基本查询之表的增删查改+聚合函数案例详解

《MySql基本查询之表的增删查改+聚合函数案例详解》本文详解SQL的CURD操作INSERT用于数据插入(单行/多行及冲突处理),SELECT实现数据检索(列选择、条件过滤、排序分页),UPDATE... 目录一、Create1.1 单行数据 + 全列插入1.2 多行数据 + 指定列插入1.3 插入否则更

PostgreSQL中rank()窗口函数实用指南与示例

《PostgreSQL中rank()窗口函数实用指南与示例》在数据分析和数据库管理中,经常需要对数据进行排名操作,PostgreSQL提供了强大的窗口函数rank(),可以方便地对结果集中的行进行排名... 目录一、rank()函数简介二、基础示例:部门内员工薪资排名示例数据排名查询三、高级应用示例1. 每

全面掌握 SQL 中的 DATEDIFF函数及用法最佳实践

《全面掌握SQL中的DATEDIFF函数及用法最佳实践》本文解析DATEDIFF在不同数据库中的差异,强调其边界计算原理,探讨应用场景及陷阱,推荐根据需求选择TIMESTAMPDIFF或inte... 目录1. 核心概念:DATEDIFF 究竟在计算什么?2. 主流数据库中的 DATEDIFF 实现2.1

MySQL中的LENGTH()函数用法详解与实例分析

《MySQL中的LENGTH()函数用法详解与实例分析》MySQLLENGTH()函数用于计算字符串的字节长度,区别于CHAR_LENGTH()的字符长度,适用于多字节字符集(如UTF-8)的数据验证... 目录1. LENGTH()函数的基本语法2. LENGTH()函数的返回值2.1 示例1:计算字符串

SQL中如何添加数据(常见方法及示例)

《SQL中如何添加数据(常见方法及示例)》SQL全称为StructuredQueryLanguage,是一种用于管理关系数据库的标准编程语言,下面给大家介绍SQL中如何添加数据,感兴趣的朋友一起看看吧... 目录在mysql中,有多种方法可以添加数据。以下是一些常见的方法及其示例。1. 使用INSERT I

Python使用vllm处理多模态数据的预处理技巧

《Python使用vllm处理多模态数据的预处理技巧》本文深入探讨了在Python环境下使用vLLM处理多模态数据的预处理技巧,我们将从基础概念出发,详细讲解文本、图像、音频等多模态数据的预处理方法,... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核