微客导航 » 文章资讯 » vue 开发一个按钮组件的示例代码

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

2023-09-14 21:00:05 170

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

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

解决思路：

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

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




.confirm{
border:none;
color:#fff;
width:100%;
padding:1rem0;
border-radius:4px;
font-size:1.6rem;
background:#5da1fd;
&:focus{
outline:none;
}
}

在页面中调用：

在这里，要注意一些细节：

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐