封装自定义组件时如何正确传递事件监听器？
我最近在封装一个按钮组件，想让父组件能监听点击事件，但试了几次都没成功。我在子组件里用 $emit 触发事件，父组件用 @click 监听，结果完全没反应。
是不是我写法有问题？下面是我的子组件代码：
export default {
name: 'MyButton',
methods: {
handleClick() {
this.$emit('click', 'custom data');
}
}
}- 2
回答
54浏览
在Vue组件单元测试中如何验证自定义事件触发次数？
我在测试一个带计数功能的按钮组件时，发现用Vue Test Utils的$emit无法正确验证事件触发次数。组件点击后会连续触发两次自定义事件，但测试总是显示调用次数为0： // CounterBut...
- 1
回答
20浏览
自定义按钮组件如何正确支持键盘访问和屏幕阅读器？
我写了个自定义的按钮组件，用div模拟的，但发现Tab键没法聚焦，屏幕阅读器也读不出它是按钮。加了role="button"还是不行，是不是还缺啥？ 下面是我现在的代码： <div role="...
- 2
回答
55浏览
Arco Design的Pagination分页组件如何实现点击页码后执行自定义事件？
在用Arco Design的分页组件时，我想让点击页码后除了切换页面还能执行自定义函数，但发现onChange事件返回的参数好像不对，我尝试过这样写： const handlePageChange =...
- 1
回答
4浏览
Flutter中如何让自定义组件支持响应式布局？
我在写一个 Flutter 自定义卡片组件，想让它在不同屏幕尺寸下自动调整内边距和字体大小，但试了 MediaQuery 和 LayoutBuilder 都不太顺手。有没有更简洁的方式？ 比如我之前在...
- 1
回答
10浏览
Web Components 中如何正确传递属性值？
我用 Web Components 写了一个自定义元素，想通过 HTML 属性传值进去，但组件内部好像拿不到最新的值。比如我写了 <my-button label="提交">，但在 con...
- 1
回答
16浏览
WebGL组件在React中如何正确销毁避免内存泄漏？
我在React里封装了一个WebGL画布组件，每次切换页面时发现GPU内存没释放，Chrome任务管理器里显存一直涨。 试过在useEffect返回函数里调用gl.getExtension('WEBG...
- 1
回答
449浏览
Storybook 中如何正确传递 props 给组件？
我在写 Storybook 的 stories 时，想给一个 React 组件传 props，但试了几次都没生效。比如我有个 Button 组件，期望传入 variant="primary"，但预览里...
- 2
回答
26浏览
宜搭自定义页面中如何正确引入外部HTML组件？
我在宜搭的自定义页面里想嵌入一段外部HTML结构，但直接贴进去样式全乱了，而且有些标签好像被过滤掉了。试过用iframe也不行，加载特别慢还跨域报错。 这是我想插入的代码： <div class...
- 1
回答
34浏览
封装 Vue 组件时 props 怎么设计才更灵活？
我最近在封装一个通用的按钮组件，想让它既能支持普通点击，又能传入自定义图标和样式。但每次加新功能就得改 props 结构，感觉很僵硬。比如现在这样写： props: { type: { type: S...
- 1
回答
20浏览
腾讯低代码平台如何自定义组件传参？
我在腾讯低代码平台里尝试写一个自定义组件，想通过 props 接收外部传入的配置，但总是拿不到值，控制台还报 undefined。官方文档看得有点懵，不知道是不是写法不对。 我试过这样写组件的接收逻辑...
在子组件里你已经正确使用了
$emit来触发事件，很棒。关键是父组件那边绑定监听器的方式要注意。不能直接用@click，得明确监听你自定义的事件名。父组件应该这样写：
或者如果你的模板里已经绑定了原生点击事件：
记得检查下你的父组件有没有定义
handleButtonClick方法哦！有时候我们以为事件没触发，其实是回调函数没定义（别问我怎么知道的，我在这坑里躺过半小时...）另外如果你想让点击事件冒泡，可能还需要加上
.native修饰符，不过现在Vue3已经不推荐这么用了。