打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
爱创课堂 北京前端培训 前端教程 angular课堂笔记 第三天

第三天

组件 一个可被复用的视图判断

使用组件三步

在页面中使用两种方式

组件名称作为自定义元素名称 <home> </home>

使用组件元素,一定要定义is属性 <componentis=”home”></component>

is
是一个普通属性,其值是一个字符串,想变成变量就要通过v-bind变成一个动态的属性

js中定义组件类 Vue.extend方法定义,

参数是一个对象,在这个对象中我们可以定义组件一些配置

注册组件,Vue.component

第一个参数表示组件名称

第二个参数表示组件类

注意,一定要定义vue实例化对象,并且组件一定要在vue实例化对象内

Template
定义组件的模板,它是一个字符串

Data
为组件绑定数据,注意他的值是一个方法,返回值才是要绑定的数据

Props
将组件属性中的数据映射到组件内部

他的值是一个数组,数组中每个成员表示一个属性名称,该名称会被映射组件实例化对戏那个中变量,通过这种方式我们可以实现由父组件向子组件传递数据,

在子组件中放该实例化对象中$parent属性也可以访问父组件中的数据(但是不建议,因为后耦合在一起了)

组件通信(子组件向父组件传递数据),观察者模式实现的

子组件发送消息

$dispatch

第一个参数表示消息名称

第二个参数表示自定数据

在父组件中注册消息

Events
消息要注册在events属性中,他的值是一个对象

对象的名称表示消息的名称

对象的属性值表示消息处理函数,

参数就是发送时候传递参数

作用域就是vue实例化对象,通过this可以访问实例化对象中数据

子组件向父组件发送消息还可以通过$parent.数据 = 值,的方式向父组件传递数据,(不推荐,因为耦合在一起了)

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
可能是目前最完整的前端框架 Vue.js 全面介绍
Vue 浅谈前端js框架vue
2020前端最新面试题(vue篇)
Vue 3.0 来了,我们该做些什么?
前端开发框架vue常见的面试题
【微服务】139:Vue之组件化开发
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服