Vue.js 超详细入门与项目实战（微课视频版）课件 第07章 组件传参_第1页
Vue.js 超详细入门与项目实战（微课视频版）课件 第07章 组件传参_第2页
Vue.js 超详细入门与项目实战（微课视频版）课件 第07章 组件传参_第3页
Vue.js 超详细入门与项目实战（微课视频版）课件 第07章 组件传参_第4页
Vue.js 超详细入门与项目实战（微课视频版）课件 第07章 组件传参_第5页
已阅读5页，还剩8页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第7章组件传参课件V1.0

教学内容第一节

父组件向子组件传参第二节子组件向父组件传参第三节组件之间传参第四节slot传参知识目标教学目标理解和掌握父与子组件之间相互传参的方法掌握两个独立组件之间相互传参的流程和方法理解父子间组件slot方式传参的过程和原理知识点预览#节知识点难点重点应用7C07-01父组件向子组件传参1、父向子组件传参说明

2、父向子组件传参实例C07-02子组件向父组件传参1、子组件自定义事件传参2、访问子组件对象中数据C07-03组件之间传参1、全局事件总线2、组件之间传参C07-04slot传参1、作用域插槽2、动态插槽

在Vue中，如果父组件向子组件传递数据，可以借助子组件的属性（prop），携带父组件传入的数据；如果子组件向父组件传递数据，则可以借助子组件的自定义事件（event）向父组件发送子组件的数据。。父向子组件传参说明如图所示事件发送子组件属性传递父组件

当父组件在视图中添加子组件时，通过动态绑定的方式向自定义的“inputName”属性传入文本框中的动态值，子组件的属性接收该值后，直接显示在该组件的视图元素中，从而最终实现父组件通过子组件自定义的属性传入参数的过程。父向子组件传参实例

父组件通过绑定子组件中自定义的事件，在触发的事件中，获取传入的数据，这种方式是子组件向父组件传参的重要方式。子组件自定义事件传参

父组件除了绑定子组件的自定义事件获取传入的参数外，还可以直接访问通过ref属性命名后的子组件，并获取到子组件中的数据。访问子组件对象中数据全局事件总线，又简称为“EventBus”，是用于全局范围内通讯的一种常用方案，它的特点是简单、灵活和轻量级，在中小型方案中，优先推荐该方案；在Vue2和Vue3中，EventBus的实现结构不同：1、在Vue2中，通常在项目中添加一个名称为Bus.js的文件，在文件中导出一个新的Vue实例即可，然后在各个组件中，引入Bus.js文件，通过$emit定义传递的事件和参数，使用$on传监听事件，并获取修传入的参数。2、由于在Vue3中移除了$emit、$on这几个事件API，因此无法像Vue2一样导出一个Vue实例化对象，根据官方推荐，可以借助第三方插件mitt来实现。

全局事件总线

使用安装好的第三方插件mitt，结合一个完整的实例，来演示任意组件之间如何实现参数传递的过程。

组件之间传参

插槽分为三种，分别为匿名插槽、具名插槽和作用域插槽，与前两种只能各自访问自己组件的内容不同，作用域插槽可以在父组件中访问到子组件的内容，使用非常灵活。接下来，结合一个完整的实例需求，来演示在作用域插槽中，父组件如何访问和过滤子组件传入的参数。

作用域插槽

不仅父组件可以通过插槽方式访问并控制子组件传入的数据，而且可以控制传入父组件时插槽的名称，从而使不同的插槽根据名称的不同，使用场景也不同，例如在一个小区详细页中，可以根据小区类型，

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论