首页 > 其他 > 详细

Vue组件之间传值以及promise介绍

时间:2021-02-21 00:16:16      阅读:137      评论:0      收藏:0      [点我收藏+]

今日重点:
一、Vue组件之间传值
1、父组件向子组件传值
①父组件是以属性的形式绑定值到子组件身上, 可以传递多个。
然后子组件用属性props接收
③在props中使用驼峰形式,模板中需要使用短横线的形式 字符串形式的模板中没有这个限制
技术分享图片
(1)props: 命名规则
①在props中使用驼峰形式, 模板中需要使用短横线的形式 因为 HTML 对大小写不敏感, 所以使用短横线的形式
②字符串形式的模板中没有这个限制
技术分享图片
(2)props 属性值类型
** 通过属性绑定传递 原始数值 否则就会传递字符串**
技术分享图片
2、子组件向父组件传值
(1)子组件用$emit()触发事件
(2)$emit() 第一个参数为 自定义的事件名称 第二个参数为需要传递的数据
(3)父组件用v-on 监听子组件的事件
(4)注意:子组件 $emit 触发的事件名称 必须 和 监听事件 的名称 保持一致
3、$emit 携带参数情况
技术分享图片
4、兄弟之间的传递
(1)兄弟之间传递数据需要借助于事件中心,通过事件中心传递数据
提供事件中心 var hub = new Vue()
(2)传递数据方,通过一个事件触发hub.$emit(方法名,传递的数据)
(3)接收数据方,通过mounted(){} 钩子中 触发hub.$on()方法名
(4)销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据
(5)在 mounted 中监听事件
二、组件插槽
(1)组件的最大特性就是复用性,而用好插槽能大大提高组件的可复用能力 => 父组件向子组件传递内容
(2)声明插槽时 => 在子组件 模板中 预留 slot 标签
(3)使用是 组件标签内的内容 会自动的传递给 插槽
技术分享图片
1、具名插槽
(1)具有名字的插槽
(2)使用 slot 中的 "name" 属性绑定元素
(3)在使用时 根据 插槽的名称 进行内容的传递
技术分享图片
2、作用域插槽
(1)父组件对子组件的内容进行加工处理
(2)既可以复用子组件的slot,又可以使slot内容不一致
技术分享图片
三、购物车案例
四、接口调用方式
1、原生ajax
2、基于jQuery的ajax
3、fetch => RESTful 接口设计规范,用于 Web 数据接口的设计。
4、axios
五、异步
1、JavaScript的执行环境是「单线程」
2、所谓单线程,是指JS引擎中负责解释和执行JavaScript代码的线程只有一个,也就是一次只能完成一项任务,这个任务执行完后才能执行下一个,它会「阻塞」其他任务。这个任务可称为主线程
3、异步模式可以一起执行多个任务
4、JS中常见的异步调用
(1)定时任务
(2)ajax
(3)事件函数
nodemon 安装命令: npm install -g nodemon
六、promise
(1)主要解决异步深层嵌套的问题
(2)promise 提供了简洁的API 使得异步操作更加容易
技术分享图片
1、基于Promise发送Ajax请求
技术分享图片
2、promise 返回值
在then方法中,你也可以直接return数据而不是Promise对象,在后面的then中就可以接收到数据了
技术分享图片
有关Vue数组操作以及组件应用 请点击a=href"https://www.cnblogs.com/kk199578/p/14393997.html"

Vue组件之间传值以及promise介绍

原文:https://www.cnblogs.com/kk199578/p/14423159.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!