vue3 model.ts render中的按钮被点击时将事件传递到vue页面

背景：列表中的字段配置放在model.ts中，models.ts中某个字段可以点击，当点击发生时需要将点击事件传递到vue页面，页面再做出相应处理。

我的model.ts配置的表格列：

 

再点击button时，该点击事件仅在model.ts内可用，无法传递到外部，所以使用vue的依赖注入方法，代码也比较简单，我的感受是有点类似于emit。

直接上代码：

model.ts：

import { inject } from 'vue';
const fieldClicked = inject<Function>('fieldClicked'); // 注入方法
fieldClicked(row); // 调用方法

在实际代码中的体现：

 

接下来就是外部的接收事件了，我们来到需要接收事件的vue页面：
import { provide } from 'vue';
const handleFieldClick = (data: any) => {
  console.log('字段被点击了，数据：', data);
  // 在这里处理点击事件
};
provide('fieldClicked', handleFieldClick); // 提供方法

这个方法代码量也比较少，看着也直观，实测没问题。

这篇分享文章就到这里啦！如果你对文章内容有疑问或想要深入讨论，欢迎在评论区留言，我会尽力回答。同时，如果你觉得这篇文章对你有帮助，不妨点个赞并分享给其他同学，让更多人受益。

想要了解更多相关知识，可以查看我以往的文章，其中有许多精彩内容。记得关注我，获取及时更新，我们可以一起学习、讨论技术，共同进步。

感谢你的阅读与支持，期待在未来的文章中与你再次相遇！

我的微信公众号：【xdub】，欢迎大家订阅，我会同步文章到公众号上。