一、概述
先来看一下页面
现有一个首页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的值,那么其他页面,也会随之变动。