当前位置:Gxlcms > JavaScript > vue开发一个按钮组件的示例代码

vue开发一个按钮组件的示例代码

时间:2021-07-01 10:21:17 帮助过:10人阅读

本篇文章主要介绍了vue 开发一个按钮组件的示例代码,现在分享给大家,也给大家做个参考。

最近面试,被问到一个题目,vue做一个按钮组件;

当时只是说了一下思路,回来就附上代码。

解决思路:

  1. 通过父子组件通讯($refs 和 props)

  2. props接受参数, $refs调用子组件的方法

  3. 来达到点击提交改变按钮状态,如果不成功则取消按钮状态

在src/components/ 下建一个button.vue

在页面中调用:

在这里,要注意一些细节:

1. button组件形成之后和其它p元素的间距,如果是在组件内定死是很难复用的。

2. 在复用的时候,在父组件中是改变不了子组件的样式的,如果要强制更改,单独写一个并去掉scoped。

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

Ajax核心XMLHttpRequest总结

解决ajax跨域请求数据cookie丢失问题

使用ajax实现无刷新改变页面内容和地址栏URL

以上就是vue 开发一个按钮组件的示例代码的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行