vue開發按鈕組件需要準備哪些東西

來源：懂視網責編：小采時間：2020-11-27 19:50:45

vue開發按鈕組件需要準備哪些東西

vue開發按鈕組件需要準備哪些東西:這次給大家帶來vue開發按鈕組件需要準備哪些東西，vue開發按鈕組件的注意事項有哪些，下面就是實戰案例，一起來看一下。最近面試，被問到一個題目，vue做一個按鈕組件；當時只是說了一下思路，回來就附上代碼。解決思路：通過父子組件通訊（$refs 和 pr

推薦度：

點擊下載本文 文檔為doc格式

導讀vue開發按鈕組件需要準備哪些東西:這次給大家帶來vue開發按鈕組件需要準備哪些東西，vue開發按鈕組件的注意事項有哪些，下面就是實戰案例，一起來看一下。最近面試，被問到一個題目，vue做一個按鈕組件；當時只是說了一下思路，回來就附上代碼。解決思路：通過父子組件通訊（$refs 和 pr

這次給大家帶來vue開發按鈕組件需要準備哪些東西，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。

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