vue哪些方式可以实现页面之间传参?如何获取到值?

2020-08-18 19:05发布

7条回答
孙哈哈
2楼 · 2021-01-11 20:44
  1. 路由传参


  2.   编程式导航: params方式 传参
        toInfo(uid){
         this.$router.push('/user/'+uid)
        }
        接收  $route.params.uid
  3. query方式传参
      this.$router.push('/user/info?'+qs.stringify(uid))
      接收:$route.query.id
  4. 组件传值

    父子组件传值:通过props接收父组件传过来的值

     子父组件传值:

             子组件给父组件传值,通过 $emit 的方法参数传递

哼哼哼哼哼
3楼 · 2020-08-20 19:29

复杂一点的用vuex,简单的可以使用params进行传值,

this.$router.push({ name: 'news', params: { userId: 123 }})

获取时使用this.$route.params.userId获取,

另外可通过eventBus传递数据

使用前可以在全局定义一个eventBus,window.eventBus = new Vue();


在需要传递参数的组件中,定义一个emit发送需要传递的值,键名可以自己定义(可以为对象)



eventBus.$emit('eventBusName', id);在需要接受参数的组件,用on接受该值(或对象)

   



奥利给
4楼 · 2020-11-23 19:07


1、父传子 

父组件的值使用自定义属性传参

parent:

import child from ‘./child’

data(){

    return {

        sendmsg:{

           title:"首页",

            id:1

        }

    }

}

components:{

child

}

子组件:

export default{

name:'child',

    props:{

            sendmsg

    }

}


字传父

子组件

methods:{

    Btnclick(){

 //1、childFn 组件方法名,父组件中用childFn方法接收子组件中的数据;2、childmsg是传递给父组件的数据

this.$emit('childFn',this.childmsg)

}

}   

父组件

methods:{

    parentFn(childmsg){

        this.parentmsg=childmsg

    }    

}

爱梦 - 拿来吧你
5楼 · 2021-10-13 09:55

在应用复杂时,推荐使用vue官网推荐的vuex,以下讨论简单SPA中的组件间传值。

一、路由传值

路由对象如下图所示:



在跳转页面的时候,在js代码中的操作如下,在标签中使用标签

this.$router.push({

name: 'routePage',

query/params: {

routeParams: params

}

})

需要注意的是,实用params去传值的时候,在页面刷新时,参数会消失,用query则不会有这个问题。

这样使用起来很方便,但url会变得很长,而且如果不是使用路由跳转的界面无法使用。

二、通过$parent,$chlidren等方法调取用层级关系的组件内的数据和方法

通过下面的方法调用:

1

2this.$parent.$data.id //获取父元素data中的id

this.$children.$data.id //获取父元素data中的id

这样用起来比较灵活,但是容易造成代码耦合性太强,导致维护困难

三、通过eventBus传递数据

使用前可以在全局定义一个eventBus

1window.eventBus = new Vue();

在需要传递参数的组件中,定义一个emit发送需要传递的值,键名可以自己定义(可以为对象)

1eventBus.$emit('eventBusName', id);

在需要接受参数的组件重,用on接受该值(或对象)

1//val即为传递过来的值

eventBus.$on('eventBusName', function(val) {

console.log(val)

})

最后记住要在beforeDestroy()中关闭这个eventBus

1eventBus.$off('eventBusName');


超甜的布丁
6楼 · 2021-10-13 10:00

1、通过router-link进行跳转,传递方式:

使用query传递参数,路由必须使用path引入,

使用params传递参数,路由必须使用name引入


跳转地址 ====> /home?key=hello&value=world

取值 ====> this.$route.query.key


跳转地址 ====> /home

取值 ====> this.$route.params.key

2、$router方式跳转

通过query

this.$router.push({

path: '/detail',

query: {

name: 'admin',

code: 10021

}

});

跳转地址 ====> /detail?name=admin&code=10021

取值 ====> this.$route.query.name

通过params

this.$router.push({

name: 'detail',

params: {

code: 10021

}

});

跳转地址 ====> /detail(注意:地址不会有参数,所以页面刷新传递的数据就没了)

取值 ====> this.$route.params.code


慢半拍
7楼 · 2021-10-13 10:29

一、router-link路由导航

父组件: 使用

例如:routerlink传参

子组件: this.$route.params.num接收父组件传递过来的参数

mounted () {
  this.num = this.$route.params.num
}

路由配置:{path: '/a/:num', name: A, component: A}

地址栏中的显示:http://localhost:8080/#/a/123

二、调用$router.push实现路由传参

父组件: 绑定点击事件,编写跳转代码

push传参
  methods: {
    deliverParams (id) {
      this.$router.push({
        path: `/d/${id}`
      })
    }
  }

子组件: this.$route.params.id接收父组件传递过来的参数

mounted () {
  this.id = this.$route.params.id
}

路由配置:{path: '/d/:id', name: D, component: D}

地址栏中的显示:http://localhost:8080/#/d/123

三、通过路由属性中的name匹配路由,再根据params传递参数

父组件: 匹配路由配置好的属性名

params传参
    deliverByName () {
      this.$router.push({
        name: 'B',
        params: {
          sometext: '一只羊出没'
        }
      })
    }

子组件:

路由配置: 路径后面不需要再加传入的参数,但是name必须和父组件中的name一致
{path: '/b', name: 'B', component: B}

地址栏中的显示: 可以看出地址栏不会带有传入的参数,且再次刷新页面后参数会丢失
http://localhost:8080/#/b

四、通过query来传递参数

父组件:

query传参
    deliverQuery () {
      this.$router.push({
        path: '/c',
        query: {
          sometext: '这是小羊同学'
        }
      })
    }

子组件:

路由配置: 不需要做任何修改
{path: '/c', name: 'C', component: C}

地址栏中的显示: (中文做了转码)
http://localhost:8080/#/c?sometext=这是小羊同学


天天
8楼 · 2021-10-29 10:02

一、父子传值

1.在父元素中绑定一个参数 : :id="updateId"

2. 在子元素中接受,使用props接收。

二、子向父传值

1.在子组件中触发

我这里并没有传值,如果需要传值,就:self.$emit('updates', '你要传的值').

2.在父元素监听事件

传参的直接在updates (参数) { }

三、同级传参

两种方式

1.query穿参,或者params传参

使用 this.$router.push({path: '/', query: {参数名: '参数值'})

this.$router.push({name: '/', params: {参数名: '参数值'})

注意: 使用params时不能使用path

接收: var a = this.$route.query.参数名

var b = this.$route.params.参数名

2.sessionStore传参

触发

监听


相关问题推荐

  • 回答 14

    1.重构响应式系统,使用Proxy替换Object.defineProperty,使用Proxy优势:•可直接监听数组类型的数据变化•监听的目标为对象本身,不需要像Object.defineProperty一样遍历每个属性,有一定的性能提升•可拦截apply、ownKeys、has等13种方法,而Object.define...

  • 回答 12

    vue页面跳转后返回原页面初始位置        vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的scrolly...

  • MVVM和MVM的不同?2020-05-09 15:51
    回答 9

    这个问题建议你系统了解下MVC→MVP→MVVM的进化历程。(1)首先说下MVC    MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写。MVC开始是存在于桌面程序中,使用MVC的目的是将M和V的实现代码分离。从图里可以看...

  • 回答 13

    目前,对于SEO支持比较好的项目方案是采用服务端渲染。所以如果项目有SEO需求,那么比较好的方案是服务端渲染。如果你已经采用了前后分离的单页项目,而你的网站内容不需要AJAX去获取内容和展示内容,那么可以试试 prerender-spa-plugin 这个插件,这个插件是...

  • vue和bootstrap的区别2021-10-14 11:13
    回答 19

    Bootstrap和vue不是一个层级的东西.Bootstrap是在jquery时代的UI组件库,而且Bootstrap大部分组件是依赖css的,依赖jQuery的组件主要是有交互的弹窗组件、下拉菜单等

  • 回答 13

    首先你需要引入另一个界面,然后通过$refs.refName的方式调用弹框的方法后者直接把弹框的属性置成true。注意需要另一个页面渲染完成后才能用【$refs.refName】

  • 回答 16

    是的,前端不会Vue根本就没必要再聊下去了

  • 回答 7

    这里有一篇文章可以帮助你https://blog.csdn.net/qq_40282732/article/details/105962708

  • 回答 5

    内部图表大小是与div容器大小位置相关的,如果想调整图表大小位置,调整div的属性就可以。如果是想调整图表与div间上下左右留白,则设置grid属性就可以。

  • 回答 7

    使用 /deep/ 注意:使用 cass 和 less 只能使用 /deep/ 这个方法

  • 回答 4

    创建icons/svg文件夹将svg文件放在该文件夹下面在components文件夹中创建svgiconfont.vue文件文件内容:        [removed]  import '@/icons'  export default {    name: 'svg-icon',    props: {      iconClass: {      ...

  • 回答 3

    引用数据类型数组的元素是对象引用,没有实际的值,需要给它实例。例如date days = new date[5];days[0]  = new date(2000,12,3)每一个days都要去分配。而基础类型都有默认初始值。

  • 回答 5

    计算属性与响应式并不冲突对立的存在,计算属性往往是用于数据的聚合或者离散,数据响应式的话就是视图响应数据变动(先容我装个逼)在vue中就是通过watcher调用一次实例对象中data的数据(当然这层数据也会做一层映射,映射到实例的属性中)在数据的defineOb...

  • 回答 3

    Vue中有一个自带的transition组件,就是用来实现过渡效果的,具体怎么使用呢,很简单,其实就两个步骤:①用transition组件,把要做过渡效果的元素包起来②写上相应的过渡效果的css是不是很简单,比把大象装冰箱还简单。然而,并没有,在这两个步骤中,我们要...

没有解决我的问题,去提问