vue组件之间传递数据

vue项目开发，组件之间传递数据

1. 兄弟组件
   兄弟组件之间传输数据，用vuex的store方式。
2. 父子组件
   父子组件之间传输数据，用vue的prop方式。

（1）， vuex：vue的状态管理工具

1.安装

npm install vuex --save

2.引入

main.js

import Vue from \'vue\'
import store from \'./store\'

new Vue({
  el: \'#app\',
  router,
  store,
  components: { App },
  template: \'<App/>\'
})

./store/index.js

import Vue from \'vue\'
import vuex from \'vuex\'
import module1from \'../static/js/module1.js\'  //不同组件的变量建议分不同模块存放，方便管理

Vue.use(vuex)

export default new vuex.Store({
  state: {
    //  定义状态
    state1: {
      state1: ‘你好’  //可以是任何对象
    },
   ......
  },
  modules: {
    module1: module1,
   ......
  }
})

3.将状态映射到组件

xxx.vue

<template>
  <div>{{state1}}</div>
</template>
< >
export default {
  computed : {
    state1() {
        return this.$store.state.state1.state1;
    },
  }
}
</ >

4.修改状态

参考网站:
http://www.cnblogs.com/wisewrong/p/6344390.html

（2），prop & $emit