vue中有哪些通信传值方式

vue中有哪些通信传值方式，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

创新互联建站-专业网站定制、快速模板网站建设、高性价比眉山网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式眉山网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖眉山地区。费用合理售后完善，10多年实体公司更值得信赖。

1、路由通信传值

路由通信是通过路由跳转用query把参数带过去，也是vue常用的通信手段。

例子：创建并在路由注册一个组件Head

创建另一个组件About并在路由注册

路由注册的简单代码

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代码：

3、父组件向子组件通信

定义父组件Head，还是用上面的例子，父组件传递一句话给子组件，如果传递的参数很多，可使用json数组{}的形式。

例子： Head父组件代码

About子组件代码

4、子组件向父组件通信 子组件向父组件通信是通过emit事件发送的，话不多说，直接上案例，还是利用上面的案例稍作修改 About子组件代码：

Head父组件代码

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组件接受状态：

看完上述内容，你们掌握vue中有哪些通信传值方式的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

本文标题：vue中有哪些通信传值方式
网站地址：http://bjjierui.cn/article/gieecs.html