小白都能看懂的vue中各种通信传值方式，附带详细代码

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什么的，适用于中小型项目，但是我用的比较少，一般上面的几种在开发中已经够用的，例子很简单，学习是永无止境的，具体更深的东西还得下功夫去研读官网或者其他资料，本文中有不对的地方或者疑惑的地方，还望大家多多指教！谢谢。