vue新增数据后,另一个页面同步数据
时间: 2023-08-12 19:19:34 浏览: 140
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
要实现这个功能,你需要使用 Vue.js 的全局事件总线。具体来说,你可以在 Vue 实例上创建一个事件总线,然后在新增数据的地方触发一个事件,另一个页面在创建时监听这个事件,一旦事件触发,就可以重新获取数据。
以下是一个简单的示例代码,假设你的事件名称为 "data-updated":
```javascript
// 在一个 Vue 实例上创建事件总线
const bus = new Vue();
// 在新增数据的地方触发事件
bus.$emit('data-updated');
// 在另一个页面监听事件
export default {
created() {
bus.$on('data-updated', () => {
// 这里重新获取数据
});
}
}
```
需要注意的是,如果你的两个页面不在同一个 Vue 实例中,那么你需要使用一个全局的 Vue 实例来创建事件总线,例如:
```javascript
// 在全局 Vue 实例上创建事件总线
Vue.prototype.$bus = new Vue();
// 在新增数据的地方触发事件
this.$bus.$emit('data-updated');
// 在另一个页面监听事件
export default {
created() {
this.$bus.$on('data-updated', () => {
// 这里重新获取数据
});
}
}
```
阅读全文