在本篇文章里小编给大家分享了关于vue中各种通信传值方式的相关知识点，有兴趣的朋友们学习下。
1、路由通信传值
路由通信是通过路由跳转用query把参数带过去，也是vue常用的通信手段。
例子：创建并在路由注册一个组件Head
//给按钮绑定点击事件
创建另一个组件About并在路由注册
我是关于页:{{ message }}
//显示接收过来的数据
路由注册的简单代码
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代码：
About代码：
我是关于页:{{ message }}
3、父组件向子组件通信
定义父组件Head，还是用上面的例子，父组件传递一句话给子组件，如果传递的参数很多，可使用json数组{}的形式。
例子： Head父组件代码
//将message参数传给子组件
About子组件代码
我是关于页:{{ text }}
4、子组件向父组件通信 子组件向父组件通信是通过emit事件发送的，话不多说，直接上案例，还是利用上面的案例稍作修改 About子组件代码：
Head父组件代码
//这里传过来父组件需要用一个方法接住 来自子组件的消息：{{message}}
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: '（3）状态的读取和提交 还是使用上面的案例，我们以子组件About提交改变状态，父组件Head接受状态并显示出来下面是About组件提交状态
Head组件接受状态：
来自子组件的消息：{{this.$store.state.message}}
//直接使用this.$store.state.message接受数据显示
总结：以上就是vue中的通信方式，当然还有一些，比如说eventBus什么的，适用于中小型项目，但是我用的比较少，一般上面的几种在开发中已经够用的，例子很简单，学习是永无止境的，具体更深的东西还得下功夫去研读官网或者其他资料，本文中有不对的地方或者疑惑的地方，还望大家多多指教！谢谢。
以上就是vue中各种通信传值方式总结的详细内容，更多请关注0133技术站其它相关文章！
