首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Vue传参一箩筐(页面、组件)

Posted in Javascript onApril 04, 2019

Vue页面、组件之间传参方式繁多，此处罗列出常用的几种方式，欢迎审阅补充。

一丶路由传参

这里的路由传参以编程式 router.push(...) 为例，声明式 <router-link :to="..."> 与之类似。此处模拟情景为从 componentsA.vue 页面跳转到 componentsB.vue 页面传参。首先，路由配置信息如下：

router.js

import Vue from 'vue'
import Router from 'vue-router'

import componentsA from './components/componentsA' //在components下创建componentsA.vue
import componentsB from './components/componentsB' //在components下创建componentsB.vue
Vue.use(Router)

export default new Router({
	routes:[
		{
			path:'/componentsA',
			name:'componentsA',
			component:componentsA
		},
		{
			path:'/componentsB',
			name:'componentsB',
			component:componentsB
		}
	]
})

1.1 路由配置传参

首先确定自己要传的参数名，将路由配置修改一下,传name,age,sex三个参数：

{
			path:'/componentsB/:name/:age/:sex',
			name:'componentsB',
			component:componentsB
		}

在 componentsA.vue 页面通过 this.$router.push 配置与之对应的参数：

componentsA.vue

<template>
	<div>
		<div>我是组件A</div>
		<button @click='routerToB1'>方式一跳转到组件B</button>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				person:{name:'Gene',age:'18',sex:'male'}
			}
		},
		methods: {
			routerToB1() {
				this.$router.push({
					path:`componentsB/${this.person.name}/${this.person.age}/${this.person.sex}`
				})
			}
		},
	}
</script>
<style>
</style>

然后在 componentsB.vue 页面用 this.$route.params 接收参数：

componentsB.vue

<template>
	<div>
		<div>我是组件B</div>
	</div>
</template>
<script>
	export default{
		created(){
			this.getRouterData()
		},
		methods: {
			getRouterData(){
				const param = this.$route.params
				console.log(param)//{name:'Gene',age:'18',sex:'male'}
			}
		},
	}
</script>
<style>
</style>

点击按钮"方式一跳转到组件B"，componentsB页面打印出 {name:'Gene',age:'18',sex:'male'} ,成功获取到A页面传过来的参数，并且地址栏显示为 localhost:8889/#/componentsB/Gene/18/male （端口号根据自己设置的来），表明这种传参方式url会携带参数。

1.2 params传参

首先将刚才路由配置修改部分还原，在 componentsA.vue 页面添加按钮"方式二跳转到组件B":

componentsA.vue

<template>
	<div>
		<div>我是组件A</div>
		<button @click='routerToB1'>方式一跳转到组件B</button>
		<button @click='routerToB2'>方式二跳转到组件B</button>
	</div>
</template>

在 methods 中添加方法 routerToB2 ，使用路由属性 name 来确定匹配的路由，使用属性 params 来传递参数：

componentsA.vue

routerToB2(){
				this.$router.push({
					name:'componentsB',
					params:{
						exa:'我是传到组件B的参数'
					}
				})
			},

componentsB.vue 保持不变，params传参方式获取参数也是通过 this.$route.params ，点击A页面新添加的按钮"方式二跳转到组件B"，在B页面打印出 {exa: "我是传到组件B的参数"} ，传参成功，地址栏为 localhost:8889/#/componentsB ，表明这种方式url不会携带参数。

1.3 query传参

这种方式和params传参方式类似，在 componentsA.vue 页面继续添加按钮"方式三跳转到组件B":

componentsA.vue

<template>
	<div>
		<div>我是组件A</div>
		<button @click='routerToB1'>方式一跳转到组件B</button>
		<button @click='routerToB2'>方式二跳转到组件B</button>
		<button @click='routerToB3'>方式三跳转到组件B</button>
	</div>
</template>

在 methods 中添加方法 routerToB3 ，使用路由属性 name 或者 path 来确定匹配的路由，使用属性 query 来传参：

componentsA.vue

routerToB3(){
				this.$router.push({
					name:'componentsB',// path:'/componentsB'
					query:{
						que:'我是通过query传到组件B的参数'
					}
				})
			}

在 componentsB.vue 页面通过 this.$route.query 来获取参数：

componentsB.vue

getRouterData(){
				const query = this.$route.query
				console.log(query)//{que: "我是通过query传到组件B的参数"}
			}

查看地址栏为 localhost:8889/#/componentsB?que=我是通过query传到组件B的参数 ，显然这种方式url会携带参数。

1.4 小结

  • 路由配置传参注意书写格式 /:id ，获取参数都是通过 $route 而不是 $router
  • params 传参和 query 传参区别类似于 post 和 get 方法。 params 传参地址栏不会显示参数，而 query 传参会将参数显示在地址栏中
  • params 传参刷新页面参数会丢失，另外两种不会
  • params 传参对应的路由属性是 name ，而 query 传参对应的路由属性既可以是 name ，也可以是 path

二丶使用缓存

缓存方式即通过 sessionStorage 、 localStorage 、 Cookie 方式传参，这种方式和是不是用Vue无关，因此，不谈。

三丶父子组件之间传值

在components目录下创建父组件 parent.vue 和子组件 children.vue ，在父组件中引入子组件。为了演示方便，在路由配置中加入 /parent 路径。

3.1 父组件向子组件传值 props

在 parent.vue 的子组件标签上注册message1,在 children.vue 中通过 props 接收message1，如果传递的值为变量，则使用 v-bind: 或直接用 : ，参考如下：

parent.vue

<template>
	<div>
		<div>我是父组件</div>
		<children message1='我是直接参数' v-bind:message2='msg' :message3='obj'></children>
	</div>
</template>

<script>
	import Children from './children'
	export default{
		components:{
			Children
		},
		data(){
			return{
				msg:'我是父组件的参数'
			}
		},
		created(){
			this.obj = {a:'1',b:'2',c:'3'}
		}
	}
</script>

<style>
</style>

children.vue

<template>
	<div>
		<div>我是子组件</div>
		<div>{{message1}}</div>
		<div>{{message2}}</div>
		<div>{{message3}}</div>
	</div>
</template>

<script>
	export default{
		props:['message1','message2','message3'],
		created(){
			console.log(this.message3)
		}
	}
</script>

<style>
</style>

在浏览器中打开：

Vue传参一箩筐(页面、组件)

3.2 子组件向父组件传值 $emit

子组件通过vm.$emit( event, […args] )，触发当前实例上的事件。附加参数都会传给监听器回调。父组件在子组件标签上监听事件获得参数。

children.vue

<template>
	<div style="margin-top: 100px;">
		<div>我是子组件</div>
		<div>{{message1}}</div>
		<div>{{message2}}</div>
		<div>{{message3}}</div>
		<button @click='ChildToParent'>点我传爱</button>
	</div>
</template>

<script>
	export default{
		props:['message1','message2','message3'],
		data(){
			return{
				loud:'I love xx'
			}
		},
		methods:{
			ChildToParent(){
				this.$emit('emitToParent',this.loud)
			}
		},
		created(){
			console.log(this.message3)
		}
	}
</script>

<style>
</style>

parent.vue

<template>
	<div>
		<div>我是父组件</div>
		<div>大声告诉我你爱谁：{{loveWho}}</div>
		<children @emitToParent='parentSayLove' message1='我是直接参数' v-bind:message2='msg' :message3='obj'></children>
	</div>
</template>

<script>
	import Children from './children'
	export default{
		components:{
			Children
		},
		data(){
			return{
				msg:'我是父组件的参数',
				loveWho:''
			}
		},
		methods:{
			parentSayLove(data){
				this.loveWho = data
			}
		},
		created(){
			this.obj = {a:'1',b:'2',c:'3'}
		}
	}
</script>

<style>
</style>

点击按钮浏览器显示：

Vue传参一箩筐(页面、组件)

3.3 小结

props 可以是字符串数组，也可以是对象（可以类型验证、设置默认值等） ；

使用 .native 修饰监听事件，开发中使用了 element-ui 的框架标签时候，使用事件绑定无效。这时候需要使用 .native 修饰 v-on:event ，可以在框架标签或组件的根元素 上监听一个原生事件，例如 <my-component v-on:click.native="doTheThing"></my-component> 。

 四丶非父子（兄弟）组件之间传值

非父子组件之间传值，需要定义公共实例文件 bus.js ，作为中间仓库来传值，不然路由组件之间达不到传值的效果。在components目录下新建 first.vue 和 second.vue 以及公共文件 bus.js 。

bus.js

import Vue from 'vue'
export default new Vue()

在 first.vue 和 second.vue 中分别引入bus.js。

import Bus from '../bus.js'

模拟情景： first.vue 向 second.vue 传值。在 first.vue 通过在事件中添加 Bus.$emit( event, […args] ) 进行传值，在 second.vue 中通过 Bus.$on(event,callBack) 进行监听。

first.vue

<template>
	<div>
		<div>我是first.vue</div>
		<button @click="firstToSecond">点击传值给second.vue</button>
	</div>
</template>

<script>
	import Bus from '../bus.js'
	export default{
		data(){
			return{
				msg:'我是first.vue传到second.vue的参数'
			}
		},
		methods:{
			firstToSecond(){
				Bus.$emit('emitToSecond',this.msg)
			}
		}
	}
</script>

<style>
</style>

second.vue

<template>
	<div>
		<div>我是second.vue</div>
		{{info}}
	</div>
</template>

<script>
	import Bus from '../bus.js'
	export default{
		data(){
			return{
				info:''
			}
		},
		mounted(){
			const that = this;
			Bus.$on('emitToSecond',function(data){
				that.info = data
			})
		}
	}
</script>

<style>
</style>

点击按钮，浏览器中显示：

Vue传参一箩筐(页面、组件)

小结

兄弟组件之间与父子组件之间的数据交互，两者相比较，兄弟组件之间的通信其实和子组件向父组件传值有些类似，他们的通信原理都是相同的，例如子向父传值也是 $emit 和 $on 的形式，只是没有 Bus ，但若我们仔细想想，此时父组件其实就充当了 Bus 这个事件总线的角色。

五丶使用Vuex

何为Vuex，看一下官网的解释：

Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式 。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vue传参一箩筐(页面、组件)

什么情况下使用Vuex?

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

在components目录下新建 vuexA.vue 和 vuexB.vue ，模拟场景： vuexA.vue 向 vuexB.vue 传值。

首先我们安装vuex， npm install vuex --save ，在src目录下创建vuex目录，然后在vuex目录下新建 index.js 、 state.js 、 getters.js 、 actions.js 、 mutations.js ：

Vue传参一箩筐(页面、组件)

vuex/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state.js'
import mutations from './mutations.js'
import getters from './getters.js'
import actions from './actions.js'
Vue.use(Vuex)

export default new Vuex.Store({
	state,
	getters,
	mutations,
	actions
})

在main.js中引入vuex/index.js并注入到Vue中：

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './vuex'
Vue.config.productionTip = false

new Vue({
	store,
	router,
 render: h => h(App),
}).$mount('#app')

state.js

export default{
	city:'nanjing'
}

vuexA.vue

<template>	
  <div>
		<div>我是vuexA中city参数：{{city}}</div>
		<input type="text" :value="city" @change="change">
	</div>
</template>

<script>
	export default{
		methods:{
			change(e){
				this.$store.dispatch('setCityName',e.target.value)
			}
		},
		computed:{
			city(){
				return this.$store.getters.getCity
			}
		}
	}
</script>

<style>
</style>

vuexB.vue

<template>
	<div>
		<div>我是vuexB中的city参数：{{city}}</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		computed:{
			city(){
				return this.$store.state.city
			}
		}
	}
</script>

<style>
</style>

actions.js

export default{
	setCityName({commit,state},name){
		commit('setCity',name)
	}
}

mutations.js

export default{
	setCity(state,name){
		state.city = name//设置新的值
	}
}

getter.js

export default{
	getCity(state){
		return state.city//返回目前城市名称
	}
}

在浏览器中打开：

Vue传参一箩筐(页面、组件)

修改input中的值：

Vue传参一箩筐(页面、组件)

显而易见，当vuexA页面中input值改变时，可同时改变vuexB页面中的值，即将city参数从vuexA页面传到了vuexB页面，从而实现用vuex在组件中传值。

vuex更多详细功能请参考Vuex中文官方文档。

全部实例代码已上传至 我的GitHub，欢迎访问Fork。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Vue传参一箩筐(页面、组件)

- Author -

dongfangyiyu

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
javascript对象的相关操作小结
May 16 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
vue实现动态数据绑定
Apr 28 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
JavaScript错误处理操作实例详解
Jan 04 Javascript
ant design实现圈选功能
Dec 17 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 04 #Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 #Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 #Javascript
详解JavaScript的变量
Apr 04 #Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 #Javascript
js 计算图片内点个数的示例代码
Apr 04 #Javascript
在node中使用jwt签发与验证token的方法
Apr 03 #Javascript
Springboot-cli(1) 主题(1) JAVA(88) FutureTask(3) 池化技术(1) ForkJoin(1) 异步回调(1) 底部导航(1) Android(19) CompletableFuture(1)
You might like
php表单提交问题的解决方法
2011/04/12 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
一个用js实现控制台控件的代码
2007/09/04 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
JavaScript高级程序设计（第3版）学习笔记3 js简单数据类型
2012/10/11 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站（两种方式）
2015/08/04 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
JS实现520 表白简单代码
2018/05/21 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
Series和DataFrame使用简单入门
2019/11/13 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
美国修容界大佬创建的个人美妆品牌：Kevyn Aucoin Beauty
2018/12/12 全球购物
Rossignol金鸡美国官网：始于1907年法国百年雪具品牌
2019/03/06 全球购物
德国的大型美妆个护电商：Flaconi
2020/06/26 全球购物
服装机修工岗位职责
2013/12/26 职场文书
运动会表扬稿大全
2014/01/16 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
python基础之停用词过滤详解
2021/04/21 Python
python使用openpyxl库读写Excel表格的方法（增删改查操作）
2021/05/02 Python
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库