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


Posted in Javascript onFebruary 14, 2019

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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(2)
Dec 23 Javascript
JQuery 学习技巧总结
May 21 Javascript
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
理解Javascript_06_理解对象的创建过程
Oct 15 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
基于jquery实现图片上传本地预览功能
Jan 08 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
JS实现div模块的截图并下载功能
Oct 17 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
微信小程序实现banner图轮播效果
Jun 28 #Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 #Javascript
JavaScript类型相关的常用操作总结
Feb 14 #Javascript
VuePress 快速踩坑小结
Feb 14 #Javascript
使用vuepress搭建静态博客的示例代码
Feb 14 #Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 #Javascript
VuePress 静态网站生成方法步骤
Feb 14 #Javascript
You might like
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
各种咖啡的英文名子是什么
2021/03/03 新手入门
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
让您的菜单不离网站
2006/10/03 Javascript
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
简单实现异步编程promise模式
2015/07/31 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
微信小程序实现左滑删除效果
2020/11/18 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
python解析xml文件实例分享
2013/12/04 Python
Python文件操作类操作实例详解
2014/07/11 Python
Python3导入自定义模块的三种方法详解
2018/04/13 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
python实现滑雪游戏
2020/02/22 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
JAVA和C++的区别
2013/10/06 面试题
自考生自我评价分享
2014/01/18 职场文书
新法人代表任命书
2014/06/06 职场文书
小城镇建设汇报材料
2014/08/16 职场文书
模范班主任事迹材料
2014/12/17 职场文书
督导岗位职责范本
2015/04/10 职场文书
2015年测量员工作总结
2015/05/23 职场文书