vue兄弟组件传参

应用场景：拥有共同父级页面的两个页面传参

原理：vue一个新的实例，类似于一个站，连接着两个组件，也就是一个中央事件总线；

实战：

1在需要传参的页面引入Bus文件

2通过Bus$emit('name'，'value')传参

(pass:$emit实例方法触发当前实例(这里的当前实例就是bus)上的事件,附加参数都会传给监听器回调。)

1在需要接收的页面引入Bus文件

2通过Bus$on("name", data => {});接收

(pass:on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由emit触发，回调函数会接收所有传入事件触发函数($emit)的额外参数。)

关于父组件的传值类型和props更多的定义详见官网 ： vue官网

（2）子组件向父组件传值

（3）通过 chlidren等方法调取用层级关系的组件内的数据和方法。

有很多时候根据业务需求要在同级组件或页面间传值，此处提供以下几种方法作为参考:

（1）通过router-link进行跳转

（2） this$routerpush()

此方法同样是有path+query和name+params两种方式：

总结：使用query，传输的值会在url后面以参数的形式显示出来，可以刷新页面，数据不变，但会是页面路由过长；而params只要一刷新传递的参数就没了。

（3）LocalStorage缓存传值

注意：简单的小项目可以这么做，如果项目很大，建议直接用vuex。

（4）通过Vuex进行传值

（5）发布订阅模式（也叫eventBus或事件总线）

在Vue的原型上定义一个变量eventBus，所有所有Vue的实例或组件都将共享这个eventBus，可以用eventBus来发布自定义事件，然后在组件中用eventBus订阅自定义事件。就可以实现传值。

详细讲解可看 链接

（6）Vueobservable

indexvue组件中触发：

Vue中如何在切换组件过程中，将状态保存到内存中，防止DOM重新渲染，通俗的讲就是实现如何在一个页面输入部分数据后到了另一个页面再返回该页面，数据还在。

需求分析：Page1中录入信息，页面跳转带Page2，然后再返回Page1，之前Page1录入的信息还存在。

现在更改需求为：

首页是A页面

A页面跳转到B，B页面不需要缓存

B页面跳转到C，C页面不需要被缓存

C页面返回到B，B页面需要缓存

B页面返回到A，

A再次跳转到B

（1）此时思路是在每个路由的beforeRouteLeave(to, from, next)钩子中设置tometakeepAlive

beforeRouteLeave讲解

PageA页面：

PageB页面：

（2）用eventBus解决此问题

需要注意的一点是发布订阅第一次会无效，因为订阅的组件还没创建。解决方法就是首次进入pageB页面时接收pageA页面params里传递的参数。

最近在写Vue搭建的后台管理系统，在跳转页面时想要 保留 地址栏参数，使刷新参数还在，但是不想显示id:1,code:2的字段名id和code，怎么办呢？

通常我们在两个页面传数据时，一般会采用params，query，或者将数据用vuex，localStorage，sessionStorage，然后方便其他页面调用数据，但是params和vuex只要页面刷新，穿过来的数据就会丢失，下面请看用 params 传数据

调整函数：

这样传参时，地址栏就会出现参数了，这样数据就不会丢失了。

除此之外，我们还可以选择配合 路由解耦 来使用

优势： 对路由参数的改变不需要通过 this route和通过beforeRouteUpdate传值时通过$routeparams获取参数改变时麻烦的写法：

只适用于 params，不适用于query；

实现方式：

在路由的配置项加一个props：true；

修改路由配置为：

要调整的组件中的props：

最后的效果 （刷新不会丢失）：

当然也可以通过 path 和 query 的方式进行传参 this$routerpush({path: 路由路径，query: {要传的产生} })

但是这不能进行 props 解耦。

方案一：

getDescribe(id) {//   直接调用$routerpush 实现携带参数的跳转

this$routerpush({

path: `/describe/${id}`,

})

方案一，需要对应路由配置如下：

{     path: '/describe/:id',

name: 'Describe',

component: Describe

}

很显然，需要在path中添加/:id来对应 $routerpush 中path携带的参数。在子组件中可以使用来获取传递的参数值。

this$routeparamsid

方案二：

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

this$routerpush({          name: 'Describe',          params: {            id: id

}

})

对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。

{     path: '/describe',

name: 'Describe',

component: Describe

}

子组件中: 这样来获取参数

this$routeparamsid

方案三：

父组件：使用path来匹配路由，然后通过query来传递参数

这种情况下 query传递的参数会显示在url后面id=？

this$routerpush({          path: '/describe',          query: {            id: id

}

})

对应路由配置：

{     path: '/describe',

name: 'Describe',

component: Describe

}

对应子组件: 这样来获取参数

this$routequeryid

这里要特别注意 在子组件中 获取参数的时候是$routeparams 而不是

$router 这很重要~~~

Spark有个关于是否允许一个application存在多个SparkContext实例的配置项, 如下: sparkdriverallowMultipleContexts: If true, log warnings instead of throwing exceptions when multiple SparkContexts are active该值默认为false, 即不

以上就是关于vue兄弟组件传参全部的内容，包括:vue兄弟组件传参、Vue组件传值及页面缓存问题、路由解耦-解决Vue通过name和params进行跳转页面传参刷新参数丢失的问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！