本篇文章主要介绍了 vue header 组件开发详解, 小编觉得挺不错的, 现在分享给大家, 也给大家做个参考一起跟随小编过来看看吧
一 header 组件开发 之数据的传递
1. App.vue 引入组件
import header from './components/header/header'
2. App.vue 中注册组件
- export default {
- components:{v-header:header}
- }
3. 使用组件
<v-header :sell="sellerObj"></v-header>
解释::sell="sellerObj", 这里就像一个函数传参一样把 sell 当成形参, sellerObj 就是实参, 那么父组件实参是怎么传给子组件的, 通过什么传
4. 父组件向子组件传递数据
在父组件中需要将 sellerObj 作为数据导出, 子组件通过 props 从父组件中获得数据, 且要指定数据类型
- export default {
- props:{ // 子组件获取 父组件 数据
- sell:{
- type:Object // 传递的类型
- }
- }
- }
小结:
子组件在 props 中创建一个属性, 用以接收父组件传过来的值
父组件中注册子组件
在子组件标签中添加子组件 props 中创建的属性
把需要传给子组件的值赋给该属性
5. 调用数据
- <div class="logo">
- <img :src="sell.avatar" alt=""width='64'height='64'/>
- </div>
- <span class="name">{{sell.name}}</span>
- <div class="description">
- {{sell.description + '/' + sell.deliveryTime + '分钟送达'}}
- </div>
细节问题:
support 绑定数据时 加 v-if ='sell.supports'
理由 : 在我们通过 axios 获取数据前在父组件中创建了一个空的对象 sellerObj 先传给子组件, 开始 没有数据传送过去就会报错 underfined, 加上 v-if , 接受不到数据就不会解析, 也就不会报错
二 header 组件弹出层 (详情)
1. 弹出遮罩层
(1) 设置一个状态, 判断该状态控制显示隐藏
- data() {
- return {
- detailShow: false
- }
- } < div v -
- if = "detailShow"class = "detail" > </div>/
(2) 绑定点击事件, 通过 methods 方法改变 状态, 控制显隐效果
- <div class="bulletin-wrapper" @click="showDetails()" ></div>
- <div class="detail-close" v-if="sell.supports">
- <i class="icon-close" @click="hideDetail()"></i>
- </div>
- methods: {
- showDetails() {
- this.detailShow = true
- },
- hideDetail() {
- this.detailShow = false
- }
- }
2. 星级评分
(1) 绑定 class 控制星级大小的类型
- // 利用 computed 属性
- < div class = "star": class = "starSizeType" > </div>/
- computed: {
- starSizeType() { // 返回 星级的大小类型 48/36/24
- return 'star-' + this.size;
- }
- }
(2) 遍历星星的数量
<span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" track-by="$index"></span>
(3) 定义常量 控制 每个星的状态
- // 类名用变量存起来
- const LENGTH = 5 // 星星长度
- const CLS_ON = 'on' // 全星
- const CLS_HALF = 'half' // 半星
- const CLS_OFF = 'off'// 空星
(4) 通过计算 判断每个 span 的类型
- itemClasses() { // 返回一个数组为每个 span 的类名 (遍历)
- let spanClassList = [];
- // 利用 实参评分来判断 有几颗全星, 半星, 空星
- let scores = (Math.floor(this.score * 2)) / 2 let intNum = Math.floor(scores); // 全星个数
- let HashalfNum = scores % 1 !== 0 // 半星
- for (var i = 0; i < intNum; i++) { // 遍历全星的 span
- spanClassList.push(CLS_ON)
- }
- if (HashalfNum) { // 如果有半星 加类名
- spanClassList.push(CLS_HALF)
- }
- while (spanClassList.length < LENGTH) { // 判断 是否有空星 及个数
- spanClassList.push(CLS_OFF)
- }
- return spanClassList;
- }
- }
(5) 通过 动态绑定 class 来 给 span 加类名
- <div class="star" :class="starSizeType">
- <span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" track-by="$index"></span>
- </div>
来源: http://www.phperz.com/article/18/0210/363172.html