之前一直使用组件之间使用跳转,但是发现了别的方式传递参数,这里讲方式总结一下然后说一下优缺点。
组件方式
首先在页面上面显示组件详情
<next-node-approved ref="nextNodeApproved" @func="passTask()" v-if="nextNodeApprovedVisible">
这里就是组件的详情
然后将组件引入
import nextNodeApproved from '../components/next-node-approved' // 下一个审批人
使用import直接引入,通过找到制定的配置路径
然后是组件的显示
components: {
SendDuplicate,
HistoryData,
addressBook,
nextNodeApproved
},
然后在将组件的名称在component显示出来
这样就可以将这个组件显示出来
路由
还有的方式就是通过路由的方式
<van-button type="primary" size="mini" plain color="#4083f6" @click="checkImage(site)">查看</van-button>
在这里使用方法
// 附件
checkImage (item) {
console.log(item)
var self = this
this.taskId = this.$route.params.taskId
this.proDefId = this.$route.params.proDefId
this.proInstanceId = this.$route.params.proInstanceId
this.pageTypeNumber = this.$route.params.pageTypeNumber
this.activetabs = this.$route.params.activetabs
this.pageType = this.$route.params.pageType
this.$router.push({
name: 'reimInneraccountbillPhone-image',
params: {
taskId: self.taskId,
proDefId: self.proDefId,
proInstanceId: self.proInstanceId,
pageTypeNumber: self.pageTypeNumber,
activetabs: self.activetabs,
pageType: self.pageType,
imageName: item.fileName,
imageSrc: item.fileId
}
})
},
在这里使用this.$router.push
将路由传递,然后通过this.$route.params.taskId
将参数传递,
这样既可以将参数进行传递
优点
路由:
当你是用来路由的时候,不会因为组件的地址在使用的时候出现问题,有一些代码可以复用但是我们还是需要将代码复制一遍,于是就是会出现路径的问题,然后通过路由的话只是需要在路由中配置一下,直接配置路由即可
组件:
组件的话就是需要不需要传递通过传递json串的形式传递数据,可以在主页面调用子页面的函数即可,将参数传递进去即可
其实这两者从根本上来说其实是一样的,但是有几点需要注意。
- 如果是使用组件形式,就需要import的时候将组件通过绝对路径的形式
- 如果使用的是路由的方式,则需要注意参数的名称,不要传递参数传递错了