vue组件之间共享数据
一、概述
先来看一下页面
现有一个首页inde.vue,是加载有3个tab,分别是工单处理A.vue,工单报价B.vue,工单回单C.vue。
这3个tab是不同的vue文件,需要共享一个工单详情orderDetails数据。这个数据从后端api请求接口获取。
简单的做法是,A,B,C这3个页面都去调用接口。那么这样的话,加载首页时,接口会被调用3次,浪费资源。
有没有可能只调用一次接口,就可以让3个页面获取呢?答案是可以的。
二、测试
新建好vue ElementUI项目之后,在views目录下创建文件夹Tab,目录结构如下:
Tab/
├── details
│ ├── A.vue
│ ├── B.vue
│ └── C.vue
└── index.vue
index.vue
<template> <div> <el-tabs v-model="activeName" type="card" closable @tab-click="handleClick"> <el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item" :name="item" > <A ref="A" @children="updateOrder" v-show="tabIndex==0" :orderDetails="orderDetails"></A> <B ref="B" @children="updateOrder" v-show="tabIndex==1" :orderDetails="orderDetails"></B> <C ref="C" @children="updateOrder" v-show="tabIndex==2" :orderDetails="orderDetails"></C> </el-tab-pane> </el-tabs> <div style="height: 10px"></div> <button @click="testUpate">更改数据</button> </div> </template> <script> import A from './details/A' import B from './details/B' import C from './details/C' export default { name: "index", components: { A, B, C, }, data() { return { tabIndex:0, // 当前点击的index orderDetails:{}, // 工单详情 // tab展示菜单 tabs: ['工单处理', '工单报价', '工单回单'], activeName:"工单处理" }; }, mounted() { this.getOrderDetails() }, methods: { handleClick(tab, event) { // console.log("handleClick",this.editableTabsValue) // console.log(tab, event); this.tabIndex = tab.index }, updateOrder(){ this.getOrderDetails() }, // 获取工单详情 getOrderDetails(){ this.orderDetails={ id: 1, process: '创建工单', status: 1, desc: '已创建工单【202109162058】', operate: '小张', createTime: '2021/09/16 20:58:52' } }, // 测试更改数据 testUpate(){ this.orderDetails={ id: 2, process: '分派工单', status: 2, desc: '已分派工单给小王【12345678910】', operate: '小张', createTime: '2021/09/16 21:58:52' } } } }; </script>
A.vue
<template> <div> <div>组件A,详情:</div> <div>{{orderDetails}}</div> </div> </template> <script> export default { name: "A", props:{ orderDetails:{ type:Object, default:{} } }, } </script> <style scoped> </style>
B.vue
<template> <div> <div>组件B,详情:</div> <div>{{orderDetails}}</div> </div> </template> <script> export default { name: "B", props:{ orderDetails:{ type:Object, default:{} } }, } </script> <style scoped> </style>
C.vue
<template> <div> <div>组件C,详情:</div> <div>{{orderDetails}}</div> </div> </template> <script> export default { name: "C", props:{ orderDetails:{ type:Object, default:{} } }, } </script> <style scoped> </style>
代码解释:
先来看index.vue
<A ref="A" @children="updateOrder" v-show="tabIndex==0" :orderDetails="orderDetails"></A>
由于父组件index需要调用子组件A,因此使用children调用updateOrder方法。这个方法用来请求后端api接口。注意:只需要在父组件中调用接口即可,子组件不需要调用接口。
再来看:orderDetails="orderDetails",表示绑定属性orderDetails
A.vue
这里需要定义传值的类型,使用prop关键字,这里的定义的orderDetails是一个对象。
总结:
由于在index,分别为组件A,B,C绑定了orderDetails。因此在index中变更orderDetails的值,那么其他页面,也会随之变动。