关于vue的组件-------我是初学者

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就可以取到数据

　}　
}