mall开发第二天

1.数据结构的组织

这里的goods是一个数组对象，在拿其中的某一项的时候，可以像取数组元素一样，直接goods[‘pop’]

2.对数据请求的又一次封装

这里的意思是在组件刚创建完成就去拿数据，所以在created里面写请求，

一般created函数中只包含逻辑，而不包含具体的操作，可以把操作放在methods中，这里就是封装成一个函数，然后直接在created中调用，封装成一个函数的好处是，比如说我想拿goods对象里面‘pop’、‘new’、‘sell’中的值，这个时候就不用重复的调用getHoneGoods,而是给它传递一个参数，这样就把功能封装起来

3.组件之间数据传递的过程

1.实现点击组件跳转到不同的页面
基础思想是：使用代码跳转 this.$router.push('path')
所以问题就是组件怎么知道path，就想到设置一个path属性，从组件的外部传过来，用path接收

props: {path: String
}

2.实现对于导航栏点击后字体的颜色还有切换成激活图像
切换激活图片就是使用v-if和else，用一个状态变量来判断是否是激活状态，比如isActive,isActive是一个布尔值，一般都是一个比较长的布尔表达式，这个时候一般是写在computed里面
而布尔表达式：一般就是===，规律：所有的组件都要有同一种标识，然后维持一个current标识，保证在点击一个组件之后这个current标识和这个组件的标识保持一致，之后isActive就是判断this.标识 === currentIndex

这就要求在最开始的时候并不能把字体的颜色写死，而是动态绑定一个变量，如activeActive
也就是这样
--------------------:style = 'activeStyle'这里activeStyle要传的是一个对象
通过上面的isAvtive，这个时候一般想到的是if（）{}，但是这里可以选择使用三目运算符？：
也就是isActive? {color: activeColor } ,{}

注：这里所有的组件要有的标识，如果没有的话，就需要我们自己给每一个组件都设置一个属性，比如上面的path，而有些是隐藏的，比如使用v-for遍历创建的组件，每一个组件都可以拿到一个index属性，之后就是维持一个currentIndex，之后就可以判断点击的是哪一个组件了，再通过是否是激活状态，设置不同的值。

3.实现局部的刷新：
由于数据都是从父组件哪里拿过来的，这就要求子组件需要传递一个信息给父组件来说明现在点击的是哪一个组件，我们就可以在子组件点击的事件里面，把每一个组件的标识给传出去，之后父组件根据传的值，使用swich来表达式来表达

swich() {case 0:statement;breakcase 1:......
}

4.实现组件的遍历
使用v-for，根据拿到的数据数组，来判断创建多少个