博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue组件传值总结
阅读量:6614 次
发布时间:2019-06-24

本文共 1481 字,大约阅读时间需要 4 分钟。

使用VUE开发有一段时间了,一直都没有整理一下相关知识,今天总结下开发过程中所遇到的一些坑,主要给大家总结一下VUE组件传值的几种常用方法:

1,路由传参(参数,可以查询):

这种传参方式个人比较喜欢(也比较常用吧)它只需要在路由跳转的时候将对应的参数以对象的形式写入:

this.$router.push({name: 'routePage',query/params: {  routeParams: params }})

这样使用起来很方便,但URL会变得很长,而且如果不是使用路由跳转的界面无法使用对应的取值方式分别为:

this.$route.params.paramName || this.$route.query.paramName

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

注:使用PARAMS传值,也可以做到页面刷新,参数不丢失,不过在命名路由时需要在路径这样设置:

{      path: '/test1/:orderId/:type',      name: 'test1',      component: test1}

  

使用时

this.$router.push({name: 'test2', params: {orderId: id, type: 'buy'}})

2,父子通信

子传父:

子组件child.vue

父组件:parents.vue
父传子:

子组件:child.vue

父组件:parents.vue

3,eventbus(非父子(同级)组件之间)

使用eventbus的方法很是简单,我们需要做三步事情,

3.1,创造一个容器去充当我们的eventbus:

在main.js全局定义一个eventBus

window.eventBus = new Vue()

3.2,抛出,或者说提交事件(eventBus。$发出)

组件一

第三步,监听事件eventBus。$上上

组件2

查看效果

在App.vue中引入,先点击<mybustest1 />传入mytestvalue,再点击<mybustest2 />接收,然后再次点击<mybustest1 />查看控制台打印值是否传入

以上就是个人对VUE组件传值对一点点小理解,希望大家多多指正

转载于:https://www.cnblogs.com/tanshao/p/9446900.html

你可能感兴趣的文章