1.将界面上比较独立的功能块拆分成组件（组件一般包括vue文件，css文件和js文件）
2.引入组件的方法：import totalPrice（该名字为自定义的名字，可以随便起） from '../../components/totalPrice'
3.使用组件的方法：<totalPrice></totalPrice>
4.注意的点：
1.在写组件的vue文件里必须要用<template></template>包裹你的内容
2.在组件里<template></template>下的内容只能有一个根节点
例子(对的)：
<template>
<div>
<div></div>
<div></div>
</div>
</template>
例子(错的)：
<template>
<div></div>
<div></div>
</template>
5.父组件向子组件中传值
写在子组件中：
props: {
（childKey为自定义）childKey: {
type: Object,}//这里的Object是指你父组件传过来的数据类型，你的数据类型是什么在这里就写什么
}
父组件的使用：
<listView v-for="(item,index) in productList" :childKey="item"></listView>（:childKey是你在子组件中自定义那个childKey）
6.子组件向父组件中传值
写在子组件里：
methods: {
confirm() {
this.$emit('confirm',this.code)
},
写在父组件里：
<addCommodity @confirm="confirm"></addCommodity> //addCommodity 是你定义的自组件的名字，@confirm是$emit里的confirm
7.计算总数可调用reduce
引入reduce：import { reduce } from 'lodash'
使用方法：
computed: {
totalPrice() {
return reduce(this.productList, (prev, item) => {
return prev + item.price * item.count
}, 0)
}
}
父组件界面调用：
<totalPrice>总价 {{totalPrice}}</totalPrice>
子组件的界面：
<div :class="styles.title"><slot></slot></div>
slot解释：它是负责分发内容，简单来说，假如父组件需要在子组件内放一些DOM，那么这些DOM是显示，不显示，在哪个地方显示，如何显示，就是slot分发负责的活。只要使用这个标签的话，可以将父组件放在子组件的内容，放到想让它显示的地方。
8.关于vuex的用法（项目是用脚手架搭建的）
1.安装vuex
2.在项目入口js文件里配置store（我的项目是index.js）
import store from './store'(我这里store文件夹下面有一个index.js,它会默认去找，如果你的下面叫别的名字，要写成store/你的js名字)
new Vue({
el:'#idun',
store
})
3.在store的index.js里配置你的存储数据的vuex的js
import search from './modules/search' (search是我的js名字)
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
search
},
})
if (module.hot) {
// 使 modules 成为可热重载模块
module.hot.accept([
'./modules/search',
], () => {
store.hotUpdate({
modules: {
search: require('./modules/search').default,
},
})
})
}
export default store
3.1.search.js里的代码（要根据自己的实际业务需要编写js代码。）
const state = {
productList: [],
}
export const getters = {
productList: state => state.productList,}
export const actions = {
loadList({ commit, state }, list){
commit('load_list', list)
}
}
export const mutations = {
load_list(state,list) {
state.productList=list
// Lockr.set('productList',state.productList)
console.log(state.productList)
}
}
export default {
state,
getters,
actions,
mutations,
}
4.在需要存数据的vue文件里调用
import {mapGetters,mapActions } from 'vuex'
export default {
methods: {
...mapActions([
'loadList' //是你在actions 里的名字
]),
ServiceList () {
this.loadList(products.result.list) //将数据传入
}
}
5.在需要取数据的vue文件里调用
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters([
'productList'
]),
}，
getList(){
return this.productList //方法里直接用this.就可以拿到数据；界面上直接用productList就可以取到数据
}
}