這次帶給大家vue開發按鈕組件步驟詳解，vue開發按鈕組件的注意事項有哪些，下面就是實戰案例，一起來看一下。
當時只是說了一下思路，回來就附上程式碼。
解決想法：
透過父子元件通訊（$refs 和props）
props接受參數, $refs調用子元件的方法
來達到點擊提交改變按鈕狀態，如果不成功則取消按鈕狀態
在src/components/ 下建一個button.vue
<template>
<!-- use plane -->
<!-- 传入bgColor改变按钮背景色 -->
<!-- state切换button的状态 调用cancel()可以切换 -->
<!-- text为按钮文字 -->
<p class="container">
<button
@click="confirm"
:disabled="state"
class="confirm"
:style="{background: btnData.bgColor}"
>{{text}}</button>
</p>
</template>
<script>
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
}
}
}
</script>
<style lang="less" scoped>
.confirm {
border: none;
color: #fff;
width: 100%;
padding: 1rem 0;
border-radius: 4px;
font-size: 1.6rem;
background: #5da1fd;
&:focus {
outline: none;
}
}
</style>在頁面中呼叫：
<template>
<p class="btn-box">
<Btn
:btnData="{text: '确认注册'}"
<!--这里就要挂载$emit调用的事件 @confirm="想要调用事件的名字"-->
@confirm="confirm"
ref="btn"
></Btn>
</p>
</template>
<script>
import Btn from '@/components/button'
export default {
components: {
Btn
},
methods: {
confirm(){
if(!this.companyName){
this.$toast("公司名不能为空")
this.$refs.btn.cancel()
}
}
}
</script>在這裡，要注意一些細節：
1. button元件形成之後和其它p元素的間距，如果是在組件內定死是很難重複使用的。
2. 在復用的時候，在父元件中是改變不了子元件的樣式的，如果要強制更改，單獨寫一個並去掉scoped。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦讀取：
以上是vue開發按鈕組件步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
