哈罗，开聊！首先咱们说说Vue，它就是个JavaScript库，做出来的网页超好看，大家都超级喜欢。接下来聊聊Vue-Router，它是Vue家里的小兄弟，专门管路由这种事儿，用得好的话，网页就能跟手机应用一样好玩酷炫。

全局变量：共享数据小技巧

首当其冲，想要分享数据的话，试试全局变量！要让所有人都能看到某个数字咋办？简单，设为Vue实例属性，大家都能轻松获取到。或者，在Vueprototype中加个$sharedData，无论哪个组件都能利用$sharedData获取这些共享的信息咯。

// main.js
import Vue from 'vue'
Vue.prototype.$sharedData = { name: 'John' }
// App.vue

  

    
{{ $sharedData.name }}
    
  

// ChildComponent.vue

  

    
{{ $sharedData.name }}
  

Vuex：状态管理利器

觉得普通的全局变量不够厉害？别急，Vuex马上让你大开眼界！它可是Vue团队精心设计的神器，让你想改什么就能改什么，轻松搞定各种难题。精华都在store这个宝库里，里面有各种数据，包括state（状态）、mutations（变更）、actions（操作）等等。设置好store以后，记得给数据上把锁，这样更安全。state就是数据库一样的地方，mutations能帮助你更换数据，actions则负责那些繁琐的活儿。最后，获取data就简单多了，就在组件里输入`this.$store.state`即可；如果想改变数据，只需要使用`commit`命令启动mutations就行。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    name: 'John'
  },
  mutations: {
    updateName(state, payload) {
      state.name = payload
    }
  },
  actions: {
    updateNameAsync({ commit }, payload) {
      setTimeout(() => {
        commit('updateName', payload)
      }, 1000)
    }
  },
  getters: {
    getName: state => {
      return state.name
    }
  }
})
export default store
// App.vue

  

    
{{ $store.state.name }}
    更新名字
    
  


import { mapMutations } from 'vuex'
export default {
  methods: {
    ...mapMutations(['updateName']),
  }
}

// ChildComponent.vue

  

    
{{ $store.state.name }}
  

通过props传递数据：父子组件亲密互动

来聊聊props传值！其实很简单，就是用Vue组件里的props这个小助手，把要分享的东西扔到里面，这样上级和下级组件就能互相知道~比如，在上头的组件设置个name=”name”，这个name变量自然而然就跑到下面去了。接着，下部组件就能通过props拿到这些信息，最终让你看到结果哦～

// App.vue

  

    
{{ name }}
    
  

// ChildComponent.vue

  

    
{{ name }}
  


export default {
  props: ['name']
}