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 相关文章推荐
关于firefox的ElementTraversal 接口 使用说明
Nov 11 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
vue组件之间通信实例总结(点赞功能)
Dec 05 Javascript
小程序测试后台服务的方法(ngrok)
Mar 08 Javascript
小程序实现分类页
Jul 12 Javascript
Vue实现base64编码图片间的切换功能
Dec 04 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 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读取文件内容的方法汇总
2015/01/24 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
php格式化时间戳
2016/12/17 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
python和shell变量互相传递的几种方法
2013/11/20 Python
Python help()函数用法详解
2014/03/11 Python
python中global用法实例分析
2015/04/30 Python
Python与R语言的简要对比
2017/11/14 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
如何利用Python识别图片中的文字
2020/05/31 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
复古服装:RetroStage
2019/05/10 全球购物
比较一下entity bean和session bean
2013/12/27 面试题
会计系毕业个人自荐信格式
2013/09/23 职场文书
销售会计工作职责
2013/12/02 职场文书
绩效工资分配方案
2014/01/18 职场文书
cf搞笑广告词
2014/03/14 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
工商管理专业自荐信
2014/06/03 职场文书
食品安全标语
2014/06/07 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
三严三实对照检查材料
2014/08/25 职场文书
Nginx的反向代理实例详解
2021/03/31 Servers
DE1107机评
2022/04/05 无线电