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

View Code

A.vue

View Code

B.vue

View Code

C.vue

View Code

代码解释：

先来看index.vue

由于父组件index需要调用子组件A，因此使用children调用updateOrder方法。这个方法用来请求后端api接口。注意：只需要在父组件中调用接口即可，子组件不需要调用接口。

再来看:orderDetails="orderDetails"，表示绑定属性orderDetails

A.vue

这里需要定义传值的类型，使用prop关键字，这里的定义的orderDetails是一个对象。

总结：

由于在index，分别为组件A，B，C绑定了orderDetails。因此在index中变更orderDetails的值，那么其他页面，也会随之变动。