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 相关文章推荐
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
Mar 18 Javascript
js显示文本框提示文字的方法
May 07 Javascript
js实现的tab标签切换效果代码分享
Aug 25 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
JS中正则表达式要注意lastIndex属性
Aug 08 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
Vue.js用法详解
Nov 13 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
Jul 11 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
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
zf框架的registry(注册表)使用示例
2014/03/13 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
微信API接口大全
2015/04/15 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
python的range和linspace使用详解
2019/11/27 Python
Pycharm和Idea支持的vim插件的方法
2020/02/21 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
Wallis官网:英国女装零售商
2020/01/21 全球购物
商业街策划方案
2014/05/31 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
公司股东出资证明书
2014/11/01 职场文书
交通事故和解协议书
2015/01/27 职场文书
老员工辞职信范文
2015/05/12 职场文书
2016母亲节感恩话语
2015/12/09 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python