1、路由通信傳值
路由通信是通過路由跳轉用query把參數帶過去，也是vue常用的通信手段。
例子：創建并在路由注冊一個組件Head
<template> <div id="head"> <button @click="handleChange">clickMe</button> //給按鈕綁定點擊事件 </div> </template><script>export default { name: 'Head', data () { return { } }, mounted(){ }, updated(){ }, methods:{ handleChange(){ this.$router.push({ path:"/about" , query:{ text:"我是阿格斯之盾" } }) //路由跳轉，并用query帶過去參數 } }}</script><style scoped></style>創建另一個組件About并在路由注冊
<template> <div id="about"> <p>我是關于頁:{{ message }}</p><button type="button" @click="handleChange">回到首頁</button> //顯示接收過來的數據 </div> </template><script>export default { name: 'About', data () { return { message: "" } }, mounted(){ this.message = this.$route.query.text //在生命周期中接收傳過來的數據 }, updated(){ }, methods:{ handleChange(){ this.$router.push({ path: "/" }) //點擊返回首頁 } }}</script><style scoped></style>路由注冊的簡單代碼
import Vue from 'vue'import Router from 'vue-router'import Head from '@/components/Head'import About from '@/components/About'Vue.use(Router)export default new Router({ mode: "history", routes: [ { path: '/', name: 'Head', component: Head },{ path: '/about', name: 'About', component: About } ]})2、sessionStorage本地緩存通信
還是列舉上面的例子，將它們稍微改一改就可以了，路由配置都一樣的。sessionStorage的特點就是瀏覽器關掉緩存就會消失，這是它區別于localStorage的。
例子： Heade代碼：
<template> <div id="head"> <button @click="handleChange">clickMe</button> </div> </template><script>export default { name: 'Head', data () { return { } }, updated(){ }, methods:{ handleChange(){ this.$router.push({ path:"/about"}) }, message(){ var message = "我是阿格斯之盾" sessionStorage.setItem('text', message) //創建緩存 } }, mounted(){ this.message(); }}</script><style scoped></style>About代碼：
<template> <div id="about"> <p>我是關于頁:{{ message }}</p><button type="button" @click="handleChange">回到首頁</button> </div> </template><script>export default { name: 'About', data () { return { message: "" } }, mounted(){ this.message = sessionStorage.getItem("text") //讀取緩存 }, updated(){ }, methods:{ handleChange(){ this.$router.push({ path: "/" }) } }}</script><style scoped></style>3、父組件向子組件通信
定義父組件Head，還是用上面的例子，父組件傳遞一句話給子組件，如果傳遞的參數很多，可使用json數組{}的形式。
例子： Head父組件代碼
<template> <div id="head"> <About :text=message></About> //將message參數傳給子組件 </div> </template><script> import About from '@/components/About.vue'export default { name: 'Head', components:{ About }, data () { return { message : "我是阿格斯之盾" } }, mounted(){ }, methods:{ }}</script><style scoped></style>About子組件代碼
<template> <div id="about"> <p>我是關于頁:{{ text }}</p> </div></template><script>export default { name: 'About', props:{ 'text':[] //子組件接受數據，[]里面可以寫傳入類型，如果不符合會報錯 }, data () { return { message: "" } }, mounted(){ }, updated(){ }, methods:{ handleChange(){ } }}</script><style scoped></style>4、子組件向父組件通信 子組件向父組件通信是通過emit事件發送的，話不多說，直接上案例，還是利用上面的案例稍作修改 About子組件代碼：
<template> <div id="about"> <button @click="handleChange">點擊發送消息給父組件</button> </div></template><script>export default { name: 'About', props:{ 'text':[] }, data () { return { message: "" } }, mounted(){ }, updated(){ }, methods:{ handleChange(){ this.$emit( "child-message" , "我是阿格斯之盾" ) //提交信息 } }}</script><style scoped></style>Head父組件代碼
<template> <div id="head"> <About @child-message = "handleText"></About> //這里傳過來父組件需要用一個方法接住 <p>來自子組件的消息：{{message}}</p> </div> </template><script> import About from '@/components/About.vue'export default { name: 'Head', components:{ About }, data () { return { message : "" } }, mounted(){ }, methods:{ handleText(data){ //這里的data就是子組件傳過來的內容 this.message = data } }}</script><style scoped></style>5、vuex狀態管理
狀態管理使用起來相對復雜，但是對于大型項目確實非常實用的。
(1)安裝vuex，并建立倉庫文件
npm install vuex -s
安裝過后在src文件中創建store文件夾，并建立index.js文件，index.js的代碼如下：
import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({ state: { message: '我是阿格斯之盾' }, mutations: { MESSAGE_INFO (state,view) { state.message = view; } }})export default store（2）在min.js中注冊store倉庫 代碼如下：
import Vue from 'vue'import App from './App'import router from './router'import store from './store'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: '#app', router, store, components: { App }, template: '<App/>'})（3）狀態的讀取和提交 還是使用上面的案例，我們以子組件About提交改變狀態，父組件Head接受狀態并顯示出來下面是About組件提交狀態
<template> <div id="about"> <button @click="handleChange">點擊發送消息給父組件</button> </div></template><script>export default { name: 'About', props:{ 'text':[] }, data () { return { message: "" } }, mounted(){ }, updated(){ }, methods:{ handleChange(){ this.$store.commit("MESSAGE_INFO" , "我是火車王") //提交改變狀態 } }}</script><style scoped></style>Head組件接受狀態：
<template> <div id="head"> <About></About> <p>來自子組件的消息：{{this.$store.state.message}}</p> //直接使用this.$store.state.message接受數據顯示 </div> </template><script> import About from '@/components/About.vue'export default { name: 'Head', components:{ About }, data () { return { message : "" } }, mounted(){ }, methods:{ }}</script><style scoped></style>總結：以上就是vue中的通信方式，當然還有一些，比如說eventBus什么的，適用于中小型項目，但是我用的比較少，一般上面的幾種在開發中已經夠用的，例子很簡單，學習是永無止境的，具體更深的東西還得下功夫去研讀官網或者其他資料，本文中有不對的地方或者疑惑的地方，還望大家多多指教！謝謝。
新聞熱點
疑難解答
