03、vue 页面跳转传值，父子组件传值

我们在子组件 reference 中的 handleClick 方法下触发绑在身上的 callback 方法，同时传入 this.cardInfoList 代表选中的那一行数据，功能实现

1、页面跳转传参

vue 传参_vue传参的几种方式vue 传参_vue传参的几种方式


vue 传参_vue传参的几种方式


父我们通过一个 emit实例方法触发当前实例(这里的当前实例就是bus)上的,附加参数都会传给回调。组件

子组件(子组件调用父组件的方法)

4、修改浏览器的title

//修改浏览器的头部

vue jsx文件标签里的 {...{ props }} 是能传多个props参数吗？vue3.0似乎没办法这样使用

data: function() {

传递不成功应该是 icon 参数的问题，虽然 组件上是可以同时有多个参数，但上面代码的返回值里组件实际只会传递一个参数，...{ props } 这个是 es6 的解构语法，如果你不清楚什么是解构，可以先搜索了解一下。

上面的 renderIcon 函数最终实际返回的可能结果只有两种情况，要么返回

要么返回

后面的 icon 子组件部分：的具体值由传入的参数决定。

也就是说，renderIcon 的返回值中， Icon 组件都只会有一个参数。

所以如果你的代码执行不成功，应该检查传入的 icon 参数是否合法，renderIcon 函数本身应该是没有问题的，也与升级版本无关，除非这个 icon 参数是由其他模块自动生成的，而且升级版本之后，传入的 icon 参数里的属性名称也跟着发生了变化，不再包含之前的 component 或 type 属性。

vue路由跳转页面的几种方式及其区别

2、父子组件传值

1.2带参数：

2.1不带参数：

2.2 query传参

2.3 params传参

2.1.1不带参数：4 直接通过path传参

2.5 传递对象(obj不能过长否则会报错)

用法同上： this.$router.push()

跳转到指定路径，并在history栈中添加一个记录，点击后退会返回到上一个页面

3. this.$router.go(n)

1. query 可以用 name 和 path 匹配路由，通过 this.$route.query.id 获取参数，刷新浏览器参数不会丢失

2. params 只能用 name 匹配路由，通过 path 匹配路由获取不到参数，对应的路由配置 path:'/home/:id' 或者 path:'home:id' ，否则刷新浏览器参数丢失

3.直接通过传参， push({path: '/home/123'}) 或者 push('/home/123') ，对应的路由配置 path:'/home/:id' ，刷新浏览器参数不会丢失

vue table表格点击选择中某一行数据并将其赋值到对应的input框中

第五步： 切换到子组件页面,用props接收父组件的传值

查阅elementUI参考文档可以发现table组件中有个 highlight-current-row 可以实现单选功能，同时通过@ row-click 来管理点击触发

row-click里面有三个参数，row代表所在行的各个数据，我们通过自定义的 handleClick 可以进行传参赋值，先return定义cardInfoList，给初始值cardInfoList赋值数据

因为table表格和赋值的input框属于兄弟组件，所以需要$emit触发父组件方法同时传参到兄弟组件中的赋值input框方法中，如下图，table表格属于 reference 组件，input框属于 custom 组件，他们的父组件为 detail 组件

在input所属的子组件 custom 组件中定义一个方法 getReferenceList

val代表的就是入参，是3、父组件调用子组件的方法一个数组，overclock下的属性绑定的就是各个input值

在父组件 detail 中定义绑在 reference 子组件上的 callback 方法，用来调取上文讲到的 custom 组件中的 getReferenceList（）方法

因为页面有按钮来判断按钮的显示隐藏使用的是 radio 组件判断，所以这时需要保证组件挂载完毕再进行接下来的作，所以此时我们用到了 this.$nextTick

Vue父组件向子组件传值 （props）、子组件改变父组件的值（$emit）

1. this.$router.push

步：父组件中引入子组件

第二步：在components中注册子组件

第三步：将子组件挂载，并绑定传值用的变量

第四步： 在data中声明2.6 params和query的区别变量

步：在父组件的data中声明需要改变的变量名称

第二步：通过$emit改变父组件的值，有两种方式： 传参、函数

第三步：需要一个函数，将值通过$emit发出

第二步：在子组件标签上绑定名称,并通过接收传值

第三步：切换到子组件页面，通过函数将值通过$emit发出

VUE父子组件之间的传值，以及兄弟组件之间的传值

向前或者向后跳转n个页面，n可为正整数或负整数

一、 Vue父子 组件之间传值

vue使用中，经常会用到组件，好处是：

1、如果有一个功能很多地方都会用到，写成一个组件就不用重复写这个功能了；

2、页面内容会简洁一些；方便管控；

子组件的传值是通过props来传递数据，$emit来触发；

下面是一个简单的子组件props传值：

父组件的部分：

第二步：在子组件标签上绑定参数首先引入组件，在组件上绑定你要传给组件的值；

然后，在组件里通过props来接收你从父页面传过来的值；so，父组件把值传给子组件就完成了；

下面是一个子组件在把值传给父组件的例子：

先是changeinput值的变化，通过changeinput值的变化，通过emit来连接父组件和子组件之间的；transferUser是在父组件连接的名称，后面跟上返回的数据；然后在父组件通过getUser获取数据,就这样子传父的过程就完成了…

二、 兄弟组件之间的传值

兄弟组件之间的传值和父子组件之间的传值非常相似，都是通过$emit;

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

下面是一个bus实例：

1、创建一个firstChild组件，引入bus,接着一个按绑定数据传输：

下面是另一个组件，引入bus实例，通过一个p标签接收数据：

这个组件的mounted里，我们了userDefinedEvent，并把传递过来的通过 emit)的额外参数。

接下来就是展示真正的效果的时候了：

点击之后：

总结:

1，首先创建一个总线，例如bus，作为一个通讯的桥梁；

2，在需要传值的组件中，通过emit触发一个自定义，并传递参数；3，在接收数据的组件中，通过emit触发一个自定义，并传递参数；3，在接收数据的组件中，通过on自定义，并处理传递过来的参数；

另外：

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

2、这种用一个Vue实例来作为总线来管理组件通信的方法只适用于通信需求简单一点的项目，对于更复杂的情况，Vue也有提供更复杂的状态管理模式Vuex来进行处理。

vue 怎么拿到router.push传递的数据

给el-table表格绑定和单选高亮属性，同时按照UI设计稿改下高亮行的背景颜色，这时又要用到我们的老朋友 ::v-deep 样式穿透

vue 怎么拿到router.push传递的数据：

主要有以下几个步骤：

（1） 设置好路由配置

router.map({ '/history/:devId/:dataId': {

name: 'history', // give the route a name

component: { ... }

}})

这里有2个关键点：

a）给该路由命名，也就是上文中的 name: 'history',

b）在路径中要使用在路径中使用冒号开头的数字来接受参数，也就是上文中的 :devId, :dataId；

（2）在v-link中传递参数；

history

这里的123，456都可以改用变量。

比如该template所对应的组件有2个变量定义如下：

devId:123,

dataId:456

}}

此时上面那个v-link可以改写为：

history

（3）在router的目标组件上获取入参

比如在router目标组件的ready函数中可以这么使用。

ready: function(){

console.log('devid: ' + this.$route.params.devId);

console.log('dataId: ' + this.$rout父组件部分：e.params.dataId);

}————完————

动态路由，然后用$route.params去获取路由对象里的信息

vue组件传值的方式

路由间传场景：A页面跳转到B页面并携带参数值。

我们可以利用两次props接收参数，直到参数从A传到C。适合所有的向下传值类型，层级可以很深。弟组件之间的数据传return {递，通过ntBus来做中间的桥梁。