vue中各种通信传值方式总结

2019-11-19 12:08:46

字体：大中小

来源：转载

供稿：网友

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

上一篇：详解JavaScript原生封装ajax请求和Jquery中的ajax请求

下一篇：微信小程序实现banner图轮播效果