Vue header组件开发详解
发布时间：2020-12-17 02:37:12 所属栏目：百科 来源：网络整理
导读：一、 header 组件开发 之数据的传递 1. App.vue 引入组件 2. App.vue 中注册组件 3. 使用组件 解释：:sell="sellerObj",这里就像一个函数传参一样把sell当成形参，sellerObj就是实参，那么父组件实参是怎么传给子组件的，通过什么传 4. 父组件向子组件传递数
一、 header 组件开发 之数据的传递1. App.vue 引入组件 2. App.vue 中注册组件 3. 使用组件 解释：:sell="sellerObj",这里就像一个函数传参一样把sell当成形参，sellerObj就是实参，那么父组件实参是怎么传给子组件的，通过什么传 4. 父组件向子组件传递数据 在父组件中需要将sellerObj作为数据导出，子组件通过props从父组件中获得数据，且要指定数据类型 小结：
5. 调用数据 细节问题： support 绑定数据时 加 v-if ='sell.supports' 理由 ： 在我们通过axios获取数据前在父组件中创建了一个空的对象sellerObj 先传给子组件，开始 没有数据传送过去就会报错 underfined，加上 v-if ，接受不到数据就不会解析，也就不会报错。 二、 header 组件弹出层（详情）1.弹出遮罩层(1) 设置一个状态，判断该状态控制显示隐藏 (2) 绑定点击事件,通过methods 方法改变 状态，控制显隐效果 2. 星级评分(1) 绑定class 控制星级大小的类型 (2) 遍历星星的数量 代码如下: (3) 定义常量 控制 每个星的状态 (4) 通过计算 判断每个span 的类型 (5) 通过 动态绑定class 来 给span 加类名 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |