如何使用Vue3组合和与AG-Grid的子级通信刷新单元格？
如何使用Vue3组合和与AG-Grid的子级通信刷新单元格？
提问于 2022-05-07 04:28:50
假设我有两个子组件A和B
A有一个按钮，它应该向网格选择框列添加一个值，而B有一个网格，该网格有一个用于列的vue选择框。
cellRenderer: 'tag-grid-select',我希望能够单击A中的按钮来刷新组件B中网格中的选择组件。
注意:这不是父到子通信，而是特别使用Vue3组合api和setup()的子通信。
回答 1
Stack Overflow用户
发布于 2022-05-07 13:15:48
我用事件总线解决了这个问题。这样，您就可以与任何组件进行通信，而不管它们之间的关系如何。我使用npm包米特
下面是一些用于子到子通信的代码
组件A --包含ag-grid-vue
导出默认值{
setup() {
return {
gridApi: null,
gridColumnApi: null,
}
},
async mounted() {
this.eventBus.on('refreshGrid', (args) => {
this.refreshGrid(args)
})
}
methods:
{
refreshGrid(params) {
this.gridApi.redrawRows()
},
async onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
}
}组件B-发出组件A要接收的命令的函数
this.eventBus.emit('refreshGrid', {yourdata})您需要根据它们的文档导入和安装mitt。我将它添加到我的main.js中，这样就不必在任何页面中导入它。
import mitt from 'mitt'
const eventBus = mitt()
app.config.globalProperties.eventBus = eventBus页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72149503
复制相关文章
相似问题
腾讯云开发者
