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

前端之家收集整理的这篇文章主要介绍了vue 开发一个按钮组件的示例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

解决思路:

  1. 通过父子组件通讯($refs 和 props)
  2. props接受参数,$refs调用子组件的方法
  3. 来达到点击提交改变按钮状态,如果不成功则取消按钮状态

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

{{text}}

页面调用

Box"> 注册'}" @confirm="confirm" ref="btn" >

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/33001.html

猜你在找的Vue相关文章