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

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

一丶路由传参

这里的路由传参以编程式router.push(.)为例，声明式路由器-链接：to=" . "与之类似。此处模拟情景为从组件sa。某视频剪辑软件页面跳转到组件B.vue页面传参。首先，路由配置信息如下：

router.js

从“vue”导入某视频剪辑软件从“vue路由器”导入路由器从"导入组件a ./组件/组件一个'//在成分下创建组件sA.vueimport组件某人来自""。/components/componentsB' //在成分下创建组件使用(路由器)导出默认新路由器({路由器：[{路径： '/组件a '，名为： '组件a '，组件：组件A }，{路径： '/组件b '，名为： '组件b '，名为： components sb }]})1.1路由配置传参

首先确定自己要传的参数名，将路由配置修改一下，传姓名、年龄、性别三个参数：

{路径： '/组件b/:名称/:年龄/:性别'，名称： '组件b '，组件：组件B }在组件sa。某视频剪辑软件页面通过这个。$路由器。推配置与之对应的参数：

组件sa。某视频剪辑软件

templatedivdiv我是组件a/div按钮@点击='路由器B1 '方式一跳转到组件b/button/div/template脚本导出默认{ data(){ return { person : { name : ' Gene '，age:'18 '，sex:'male'}}}，方法： { Router B1(){ this .$路由器。push({ path : ` components b/$ { this。人。name }/$ { this。人。age }/$ { this。人。sex } `})}，}/scriptstyle/style然后在组件B.vue页面用这个。$路由。参数接收参数：

组件B.vue

templatedivdiv我是组件b/div/div/模板脚本导出默认值{ created(){ this。getRouterData()}，方法： { getRouterData(){ const param=this .$路线。帕拉司康鞋底。log(param)//{ name : ' Gene '，age:'18 '，sex: ' male ' } } }，}/scriptstyle/style点击按钮'方式一跳转到组件' b '，组件b页面打印出{姓名： '基因，年龄：'18 ',性别： '男性' },成功获取到A页面传过来的参数，并且地址栏显示为localhost :8889/#/组件b/Gene/18/男（端口号根据自己设置的来),表明这种传参方式全球资源定位器(统一资源定位符)会携带参数。

1.2参数传参

首先将刚才路由配置修改部分还原，在组件sa。某视频剪辑软件页面添加按钮'方式二跳转到组件B':

组件sa。某视频剪辑软件

templatedivdiv我是组件a/div按钮@点击='路由器B1 '方式一跳转到组件b/按钮按钮@点击=' B2路由器'方式二跳转到组件b/按钮/div/模板在方法中添加方法路由器B2，使用路由属性名字来确定匹配的路由，使用属性参数来传递参数：

组件sa。某视频剪辑软件

routerToB2(){this .$路由器。push({ name : ' Componentsb '，params: { exa: '我是传到组件B的参数}})}，componentsB.vue保持不变参数传参方式获取参数也是通过这个$route.params，点击A页面新添加的按钮'方式二跳转到组件' b '，在B页面打印出{ exa : }我是传到组件B的参数'} ,传参成功，地址栏为localhost :8889/#/组件b，表明这种方式全球资源定位器(统一资源定位符)不会携带参数。

1.3查询传参

这种方式和参数传参方式类似，在组件sa。某视频剪辑软件页面继续添加按钮'方式三跳转到组件B':

组件sa。某视频剪辑软件

templatedivdiv我是组件a/div按钮@点击='路由器B1 '方式一跳转到组件b/按钮按钮@点击=' B2路由器'方式二跳转到组件b/按钮按钮@点击=' B3路由器'方式三跳转到组件b/按钮/div/模板在方法中添加方法路由器B3，使用路由属性名字或者小路来确定匹配的路由，使用属性询问来传参：

组件sa。某视频剪辑软件

路由器B3(){这个.$路由器。push({ name : ' components b '，//path : '/components b ' query : { que: '我是通过询问传到组件B的参数'}})}在组件B.vue页面通过这个$route.query来获取参数：

组件B.vue

getrouterdata(){ const query=this。$ route . querycon sole . log(query)/{ que: '我通过query将参数传递给了组件} }地址栏是localhost :889/#/component sb？Que=我通过查询将参数传递给了组件b，显然url会以这种方式携带参数。

1.4总结

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

二丶使用缓存

缓存模式，即通过sessionStorage、localStorage、Cookie传递参数，与是否使用Vue无关，就不多说了。

三丶父子组件之间传值

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

3.1父组件将值道具传递给子组件

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

parent.vue

Templatedivdiv我是父组件/divchildren message1='我是直接参数' v-bind : message 2=' msg ' 3360 message 3=' obj '/children/div/template script import children from '。/Children ' s export default { components 3360 { Children }，data () {return {msg3360 '我是父组件的参数' }}，created () {this。obj={a:' 1 '，b:' 2 '，c:' 3。

Templatedivdiv我是子组件/div div { { message 1 } }/div div { { message2 } }/div div { { message 3 } }/div/div/templatescriptexportdefault { props 3360[' message 1 '，' message 2 '，Message3']，created(){ console . log(this . message 3)}/script style/style在浏览器中打开：

3.2子组件将值$emit传递给父组件

子组件通过虚拟机在当前实例上触发事件。$emit(event，[…args])。附加参数被传递给侦听器回调。父组件监听子组件标签上的事件以获取参数。

children.vue

template div style=' margin-top : 100px；'Div我是子组件/div div { { message 1 } }/div div { { message2 } }/div div { { message 3 } }/div button @ click=' childo part ' click me传递love/button/div/template script export default { prop s 3360 [' message 1 '，' message 2 '，' message3']，data(){ return { loud : ' I love xx ' }，methods : { childtopaprent(){ this。$emit('emitToParent '，this.loud)}}，created(){ console . log(this . message 3)}/script style/style parent . vue

Templatedivdiv我是父组件/divdiv大声告诉我你爱谁：{ { love WHo } }/Div children @ emittopaplate=' parentsaylove ' message 1='我是直接参数' v-bind : message 2=' msg ' 3360 message 3=' obj '/children/div/Template script children from '。/children ' export default { components 3360 { children }，data () {return {msg:' I是父组件的参数'，lovewho3360''}}，Methods : { parentsaylove(data){ this。lovewho=data}}，created () {this。obj={a:' 1 '，b:' 2 '，c : ' 3 ' }/脚本样式/单击按钮浏览器显示：

3.3总结

道具可以是字符串数组，也可以是对象(类型验证、默认设置等)。);

使用。原生修改监听事件，在开发中使用element-ui的frame标签时，使用事件绑定无效。此时，您需要使用修改on:event。原生的，您可以在框架标签或组件的根元素上监听原生事件，例如my-component v-: click。native=“做那件事”/my-component。

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

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

bus.js

从' vue '导入vue导出默认的new vue()将bus.js分别引入first.vue和second.vue。

导入总线来源-什么/bus.js安其林贾科琳贾科琳贾科琳贾科琳贾科琳贾科琳贾科琳贾科琳贾科琳贾科琳贾科琳贾科琳贾科琳贾科琳贾科琳：第一个视图你好第二个视图吴亚玲。哦，天啊一见钟情贺盛瑞贺盛瑞公共汽车$emit(事件，[……参数])菲兰达，哦，天啊第二个视图绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿公共汽车$on .事件回调贺盛瑞（音译)。

一见钟情

templatedivdiv(圣殿骑士团)阿成第一个视图/divbutton @ click=“第一掷秒”朱庇特朱庇特第二个视图/按钮/div/templatescript导入总线自'-什么/公交车。js ' export default { data(){ return { msg : }阿成一见钟情你好第二个视图阿金阿金阿金阿金阿金阿金阿金阿金阿金阿金阿金阿金阿金阿金阿金阿金阿金阿金阿金阿金' },方法： { first toscond(){ bus。}。$ emit(' emit cond '，这个。msg)} }/脚本风格/风格秒。视角

templatedivdiv(圣殿骑士团)阿成第二个。视图/div { { info } }/div/template script导入总线自'-什么/公交车。js ' export default { data(){ return { info 3330 ' ' }，mounted(){ const=this；公共汽车$ on(' emit cond '，函数(数据){ that。info=data } }/脚本样式/样式朱庇特朱庇特，杨俊钦先生：

是吗

不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，朱力安阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉阿吉，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔给我你好我们走吧阿金，哎哎哎哎哎公共汽车，范仲淹把范仲淹给范仲淹，云娥与云娥同在公共汽车贺南德贺南德贺南德贺南德。

五丶使用Vuex

年欧洲足球锦标赛云娥武克(Vuex)，范仲淹还是范仲淹：

武契特-什么查看。js-检视。射流研究…吕宋吕宋韩世宁韩世宁。是范仲淹，是范仲淹，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是。

朱庇特朱庇特朱庇特武克？

武契特嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，嗨，1826年。绿筠小姐与绿筠小姐。

喂喂喂喂喂喂喂喂喂喂喂，僧曰武契特喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂。云娥——你好你好，范仲淹武契特。何如商店吗云娥与云娥。魏冄，你好你好你好，-你好-你好，Vuex不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不。

哦，天啊组件(组件)何首肯vue ja，vue你好vuexb。vista(检视),阿查看详细信息-视图你好vuexB视图吴亚玲。

vuex、npm安装vuex -保存、哦，天啊src(资源中心)阿叔阿叔阿叔武契特阿金，你好武契特何首肯索引。js”状态。js " getter。js "行动。js”突变。js:美国国家统计研究所：

vuex/index.js

从视图导入视图从视图导入视图从视图导入状态/state.js '汇入变异来源。/突变。js的导入getters来自。（从。射流研究…导入getter )./getter。js“从导入操作”./actions。js的观点。使用(vuex)导出默认新vuex .商店({状态、获取者、突变、动作})哦，天啊手，js魏冄vuex/index.js1828年视图(视图)何曰：

手，js

从'视图'导入视图'从'导入应用程序/App。视图"导入路由器自"。/路由器“从导入存储”./vuex视图。配置。生产提示=错误视图({ store，router，render 3330h=h(app)，}).$ mount(# app)状态。射流研究…

汇出预设{ city : '南京} } vuexa。视角

divdiv模板阿成武阿塔何曰-城市哎哎哎：{ { city } }/divi输入类型=' text ' 3330值=' city " @ change=' change '/div/template script导出默认值{ methods 3330 { change(e){ this } .$store.dispatch('setCityName '，e.target.value)}，计算结果为： { city(){ return this } .$商店。吸气器。getcity } }/script style/style vuex b。视角

templatedivdiv(圣殿骑士团)阿成vuexB(消歧义)绿筠-城市哎哎哎：{ { city } }/div/div/template script导出默认{ data(){ return }，已计算3360 { city(){ return this } .$商店。国家。city } }/脚本风格/风格动作。射流研究…

导出默认的{ set city name({ commit，state}，{commit('setCity，name)} }突变。射流研究…

汇出预设{setCity(州，名称){state.city=name//你是谁}}getter.js

汇出预设{ get ity(state){返回状态。城市/贺盛瑞！贺盛瑞！贺盛瑞！贺盛瑞！贺盛瑞！贺盛瑞！贺盛瑞！贺盛瑞！贺盛瑞！贺盛瑞！贺盛瑞！贺盛瑞！贺盛瑞！贺盛瑞！贺盛瑞}}你好：

魏冄输入内容张居正（音译):

1740年，第40号命令个武阿塔阿云哥输入内容哎哎哎，哎哎哎哎vuexB(消歧义)你是谁，你好-城市哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟武阿塔-你好-你好vuexB(消歧义)希仪，云娥武契特哎哎哎哎哎哎。

武契特绿姊姊绿姐姐绿姐姐武契特云娥与云娥。

所有的实例代码都已经上传到我的GitHub了。欢迎来到福克。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。