本篇文章主要介绍了vue 开发一个按钮组件的示例代码，现在分享给大家，也给大家做个参考。一起过来看看吧
最近面试，被问到一个题目，vue做一个按钮组件；
当时只是说了一下思路，回来就附上代码。
解决思路：
通过父子组件通讯（$refs 和 props）
立即学习“前端免费学习笔记（深入）”；
props接受参数, $refs调用子组件的方法
来达到点击提交改变按钮状态，如果不成功则取消按钮状态
在src/components/ 下建一个button.vue
export default { data(){ return { text: this.btnData.text, state: false, } }, props: { btnData: { types: Array, default() { return { text: '确认', } } } }, methods: { confirm(){ this.text += '...' this.state = true //这里是激活父组件的事件，因为子组件是不会冒泡到父组件上的，必须手动调用$emit //相对应父组件要在调用该组件的时候，将其挂载到上面 this.$emit("confirm") }, cancel(){ this.text = this.btnData.text this.state = false } }}.confirm { border: none; color: #fff; width: 100%; padding: 1rem 0; border-radius: 4px; font-size: 1.6rem; background: #5da1fd; &:focus { outline: none; }}
登录后复制
在页面中调用：
@confirm="confirm" ref="btn" >
import Btn from '@/components/button'export default { components: { Btn }, methods: { confirm(){ if(!this.companyName){ this.$toast("公司名不能为空") this.$refs.btn.cancel() } }}
登录后复制
在这里，要注意一些细节：
1. button组件形成之后和其它p元素的间距，如果是在组件内定死是很难复用的。
2. 在复用的时候，在父组件中是改变不了子组件的样式的，如果要强制更改，单独写一个并去掉scoped。
相关推荐：
vue中的provide/inject的学习
论vue项目api相关代码的组织方式
以上就是vue 开发一个按钮组件的示例代码_vue.js的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2776764.html
