vue開發按鈕組件步驟詳解

這次帶給大家vue開發按鈕組件步驟詳解，vue開發按鈕組件的注意事項有哪些，下面就是實戰案例，一起來看一下。

當時只是說了一下思路，回來就附上程式碼。

解決想法：

1. 透過父子元件通訊（$refs 和props）

2. props接受參數, $refs調用子元件的方法

3. 來達到點擊提交改變按鈕狀態，如果不成功則取消按鈕狀態

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

<template>
<!-- use plane -->
<!-- 传入bgColor改变按钮背景色 -->
<!-- state切换button的状态 调用cancel()可以切换 -->
<!-- text为按钮文字 -->
 <p>
  <button>{{text}}</button>
 </p>
</template>
<script>
export default {
 data(){
  return {
   text: this.btnData.text,
   state: false,
  }
 },
 props: {
  btnData: {
   types: Array,
   default() {
    return {
     text: &#39;确认&#39;,
    }
   }
  }
 },
 methods: {
  confirm(){
   this.text += &#39;...&#39;
   this.state = true
   //这里是激活父组件的事件，因为子组件是不会冒泡到父组件上的，必须手动调用$emit
   //相对应父组件要在调用该组件的时候，将其挂载到上面
   this.$emit("confirm")
  },
  cancel(){
   this.text = this.btnData.text
   this.state = false
  }
 }
}
</script>
<style>
.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>
   <btn>
    @confirm="confirm"
    ref="btn"
   ></btn>
  </p> 
</template>
<script>
import Btn from &#39;@/components/button&#39;
export default {
 components: {
  Btn
 },
 methods: {
  confirm(){
   if(!this.companyName){
    this.$toast("公司名不能为空") 
    this.$refs.btn.cancel()
   }
 }
}
</script>

在這裡，要注意一些細節：

1. button元件形成之後和其它p元素的間距，如果是在組件內定死是很難重複使用的。

2. 在復用的時候，在父元件中是改變不了子元件的樣式的，如果要強制更改，單獨寫一個並去掉scoped。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦讀取：

EL取得上下文參數步驟詳解

#el表達式怎麼判斷非空

以上是vue開發按鈕組件步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！