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

相关文章

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

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

MySQL 中的 CAST 函数详解及常见用法

《MySQL中的CAST函数详解及常见用法》CAST函数是MySQL中用于数据类型转换的重要函数,它允许你将一个值从一种数据类型转换为另一种数据类型,本文给大家介绍MySQL中的CAST... 目录mysql 中的 CAST 函数详解一、基本语法二、支持的数据类型三、常见用法示例1. 字符串转数字2. 数字

MySQL 删除数据详解(最新整理)

《MySQL删除数据详解(最新整理)》:本文主要介绍MySQL删除数据的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、前言二、mysql 中的三种删除方式1.DELETE语句✅ 基本语法: 示例:2.TRUNCATE语句✅ 基本语

Python内置函数之classmethod函数使用详解

《Python内置函数之classmethod函数使用详解》:本文主要介绍Python内置函数之classmethod函数使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 类方法定义与基本语法2. 类方法 vs 实例方法 vs 静态方法3. 核心特性与用法(1编程客

Python函数作用域示例详解

《Python函数作用域示例详解》本文介绍了Python中的LEGB作用域规则,详细解析了变量查找的四个层级,通过具体代码示例,展示了各层级的变量访问规则和特性,对python函数作用域相关知识感兴趣... 目录一、LEGB 规则二、作用域实例2.1 局部作用域(Local)2.2 闭包作用域(Enclos

MySQL count()聚合函数详解

《MySQLcount()聚合函数详解》MySQL中的COUNT()函数,它是SQL中最常用的聚合函数之一,用于计算表中符合特定条件的行数,本文给大家介绍MySQLcount()聚合函数,感兴趣的朋... 目录核心功能语法形式重要特性与行为如何选择使用哪种形式?总结深入剖析一下 mysql 中的 COUNT

MyBatisPlus如何优化千万级数据的CRUD

《MyBatisPlus如何优化千万级数据的CRUD》最近负责的一个项目,数据库表量级破千万,每次执行CRUD都像走钢丝,稍有不慎就引起数据库报警,本文就结合这个项目的实战经验,聊聊MyBatisPl... 目录背景一、MyBATis Plus 简介二、千万级数据的挑战三、优化 CRUD 的关键策略1. 查

python实现对数据公钥加密与私钥解密

《python实现对数据公钥加密与私钥解密》这篇文章主要为大家详细介绍了如何使用python实现对数据公钥加密与私钥解密,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录公钥私钥的生成使用公钥加密使用私钥解密公钥私钥的生成这一部分,使用python生成公钥与私钥,然后保存在两个文

mysql中的数据目录用法及说明

《mysql中的数据目录用法及说明》:本文主要介绍mysql中的数据目录用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、背景2、版本3、数据目录4、总结1、背景安装mysql之后,在安装目录下会有一个data目录,我们创建的数据库、创建的表、插入的

MySQL 中 ROW_NUMBER() 函数最佳实践

《MySQL中ROW_NUMBER()函数最佳实践》MySQL中ROW_NUMBER()函数,作为窗口函数为每行分配唯一连续序号,区别于RANK()和DENSE_RANK(),特别适合分页、去重... 目录mysql 中 ROW_NUMBER() 函数详解一、基础语法二、核心特点三、典型应用场景1. 数据分