前端技术22vue组件通信_第1页
前端技术22vue组件通信_第2页
前端技术22vue组件通信_第3页
前端技术22vue组件通信_第4页
前端技术22vue组件通信_第5页
全文预览已结束

下载本文档

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

文档简介

课题第8章vue组件第二节vue组件通信授课时间第九周教学目的掌握vue组件之间父组件向子组件通信掌握子组件向父组件通信教学重点vue组件之间传参方式教学难点子组件向父组件传递参数教学过程教学环节教学内容教学方法、手段及时间分配课前提问导入讲授新课课堂实践讲授新课案例开发总结提问：vue中为什么要使用组件？Vue组件注册的方式有哪些？导入：展示一个包含多个交互元素的复杂Vue页面示例，如一个电商产品详情页，其中有商品信息展示组件、用户评论组件、购物车组件等，这些组件之间存在数据交互的需求。提出问题：在这些不同的组件之间如何进行数据的传递和通信呢？由此引出本节课的主题——Vue组件之间的通信。第二节vue组件通信一、Vue组件通信：组件是可以嵌套使用的，A组件里面可以包含B组件，这样的话就形成了一个如下的组件结构：我们将包含其他组件的组件成为父组件，被包含的组件则是这个父组件的子组件。二、父组件向子组件通信有时候，我们的子组件是需要接受父组件传来的数据的，比如说一个form组件，它需要接受一个数据来对它内部的元素进行初始化操作。当然，我们可以直接在组件中使用Vue实例对象来获取数据，但是当你的组件被别人使用的时候呢？你是不知道别人是如何定义Vue实例名称的。对此，Vue给出了对应的解决方法。通过Prop向子组件传递数据。Prop是你可以在组件上注册的一些自定义attribute。当一个值传递给一个propattribute的时候，它就变成了那个组件实例的一个属性。在组件的注册中，我们新增了props属性，它是一个数组。数组的元素是定义在组件上的属性名称。案例，使用prop属性向子组件传递数据。在子组件的props选项中接收prop属性，然后使用插值语法在模板中渲染prop属性。代码案例：三、vue子组件向父组件通信在Vue中可以通过自定义事件来实现。子组件使用$emit()方法触发事件，父组件使用v-on指令监听子组件的自定义事件。$emit()方法的语法形式如下：vm.$emit(myEvent,[…args])其中myEvent是自定义的事件名称，args是附加参数，这些参数会传递给监听器的回调函数。如果要向父组件传递数据，就可以通过第二个参数来传递在子组件中，通过emit()来触发事件，通知父组件处理在父组件中，监听子组件事件代码案例：总结本节课内容，布置作业。第一课时提问（5分钟）导入（5分钟）讲授（25分钟）实践（10分钟）第二课时讲授（25分钟）实践（15分钟）总结（5分钟）

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

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

最新文档

评论

0/150

提交评论