在vue3.0中封裝button使用slot組件

更新時(shí)間：2022年05月27日 15:48:00 作者：周家大小姐.

這篇文章主要介紹了在vue3.0中封裝button使用slot組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

封裝button使用slot組件

需求

同一個(gè)button在不同頁(yè)面使用,只有文字不一樣;有的內(nèi)容為登錄有的為注冊(cè)

下面我們自封一個(gè)button組件

子組件

<template>
<!-- :type="type" 為按鈕類(lèi)型 :disabled="disabled" 為判斷他為false還是ture ?
? ? {'is-disabled':disabled} 如果為true就可以有is-disabled的樣式
? ? @click="$emit('click')" 傳入一個(gè)cklick點(diǎn)擊事件
-->
? ? <button?
? ? ? ? class="y-button" ? ?
? ? ? ? :class="{'is-disabled':disabled}"
? ? ? ? :type="type"
? ? ? ? :disabled="disabled"
? ? ? ? @click="$emit('click')"
? ? >
? ? ? ? <slot>
? ? ? ? ? ? <!-- 這是一個(gè)插槽在父組件中可以放入登錄或都注冊(cè)的文本字段 -->
? ? ? ? </slot>
? ? </button>
</template>

<script>
export default {
? ? name:'ybutton',
? ? props:{//傳值去到父組件?
? ? ? ? type:String,
? ? ? ? disable:{//傳值類(lèi)型,默認(rèn)值為false
? ? ? ? ? ? type:Boolean,
? ? ? ? ? ? default:false
? ? ? ? }
? ? }
}
</script>

<style scoped>
/* 獲取焦點(diǎn)的時(shí)候和hover的時(shí)候改變顏色 */
.is-disabled:focus,
.is-disabled:hover{
? ? background: blue;
? ? color:white;
?
}
</style>

父組件引用

<template>
    <div>
        <input type="text" v-model="use.email">
        <div class="btn_wrap">
            <Ybutton :disabled="isDisabled" @click="loginClick">登錄</Ybutton>
        </div>
    </div>
</template>

<script>
// 引入button組件
import Ybutton from "./Ybutton"
export default {
    data(){
        return{
            user:{
                email:''
            }
        }
    },
    components:{//注冊(cè)組件
        Ybutton
    },
    computed:{//監(jiān)聽(tīng)子組件的disabled用于啟用或禁用按鈕
        isDisabled(){
            if(this.user.email){
                // 如果input框有值就讓disabled為false 不禁用
                return false;
 
            }else{
                return true;
            }
        }
 
    },
    methods:{
        loginClick(){
            // 實(shí)現(xiàn)登錄,存儲(chǔ)token
            this.$axios.post('/api/users/login',this.user).then(res =>{
                // res 結(jié)果用會(huì)返回token 我們可以用解構(gòu)模式給他存儲(chǔ)
                const { token } = res.data;
                // 存儲(chǔ)ls
                localStorage.setItem('wxToken',token);
                //存儲(chǔ)之后頁(yè)面進(jìn)行主頁(yè)跳轉(zhuǎn)
                this.$router.push('/')
 
            })
        }
    }
}
</script>

vue帶你封裝一個(gè)button

作為一個(gè)后端程序員偶爾搞搞前端，對(duì)我自己來(lái)說(shuō)是打開(kāi)新的領(lǐng)域，提高自己的競(jìng)爭(zhēng)力，說(shuō)實(shí)話搞前端和搞后端的思維方式是完全不同的，注重點(diǎn)也是非常不同的，話說(shuō)今天寶寶我農(nóng)歷生日哈哈哈哈，開(kāi)心就寫(xiě)幾篇放縱一下。

使用 Vue-cli 創(chuàng)建一個(gè) HelloWorld 項(xiàng)目即可作為起始腳手架。

創(chuàng)建一個(gè) ShowButton.vue 的組件

<template>
  <div>
    <h1>封裝一個(gè) button</h1>
    <div v-if="value === 1">
      <button @click="buttonClick()">button1</button>
    </div>
    <div v-else-if="value === 2">
      <button @click="buttonClick()">button2</button>
    </div>
    <div v-else>
      <button @click="buttonClick()">button3</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "ShowButton",
  data() {
    return {
      value: 2
    };
  },
  methods: {
    buttonClick() {
      console.log("value" + this.value);
    }
  }
};
</script>
<style>
</style>

這里用了vue 里的 v-if 表達(dá)式做邏輯判斷，但是如果有 10 個(gè)按鈕，那么就需要寫(xiě) 10 個(gè) 判斷，而且如果該組件還將被別的頁(yè)面引用到，那就得還得復(fù)制一遍。代碼一點(diǎn)也不優(yōu)雅呀。

我們借助于 VUE 給我們提供的 render 函數(shù)解決這個(gè)問(wèn)題。

新建一個(gè) Button.vue

<script>
export default {
? ? props:{
? ? ? ? type:{
? ? ? ? ? ? type:String,
? ? ? ? ? ? default:'normal'
? ? ? ? },
? ? ? ? text:{
? ? ? ? ? ? type:String,
? ? ? ? ? ? default:'button'
? ? ? ? }
? ? },
? ? render(h){
? ? ? ? /**
? ? ? ? ?* h 是 createElement 的另一個(gè)名稱, 接受 2 個(gè)參數(shù)，具體可看 vue 文檔
? ? ? ? ?* 1 - 元素
? ? ? ? ?* 2 - 選項(xiàng)
? ? ? ? ?*/
? ? ? ? return h('button',{
? ? ? ? ? ? class:{
? ? ? ? ? ? ? ? btn: true,
? ? ? ? ? ? ? ? 'btn-success': this.type === 'success',
? ? ? ? ? ? ? ? 'btn-danger': this.type === 'danger',
? ? ? ? ? ? ? ? 'btn-warning': this.type === 'warning',
? ? ? ? ? ? ? ? 'btn-normal': this.type === 'normal'
? ? ? ? ? ? },
? ? ? ? ? ? domProps:{
? ? ? ? ? ? ? ? innerText: this.text || '默認(rèn)'
? ? ? ? ? ? },
? ? ? ? ? ? on:{
? ? ? ? ? ? ? ? click: this.handleClick
? ? ? ? ? ? }
? ? ? ? })
? ? },
? ? methods:{
? ? ? ? handleClick(){
? ? ? ? ? ? this.$emit('myClick')
? ? ? ? }
? ? }
}
</script>

<style scoped>
.btn{
? ? width: 100px;
? ? height:40px;
? ? line-height:40px;
? ? border:0px;
? ? border-radius:5px;
? ? color:#ffff;
}
.btn-success{
? ? background:#2ecc71;
}
.btn-danger{
? ? background:#e74c3c;
}
.btn-warning{
? ? background:#f39c12;
}
.btn-normal{
? ? background:#bdc3c7;
}
</style>

ShowButton.vue 內(nèi)使用

<template>
? <div>
? ? <h1>封裝一個(gè) button</h1>
? ? <!-- <div v-if="value === 1">
? ? ? <button @click="buttonClick()">button1</button>
? ? </div>
? ? <div v-else-if="value === 2">
? ? ? <button @click="buttonClick()">button2</button>
? ? </div>
? ? <div v-else>
? ? ? <button @click="buttonClick()">button3</button>
? ? </div> -->
? ? ?<Button type='success' text='button1' @myClick="buttonClick()"></Button>
? </div>
</template>

<script>
import Button from "./Button.vue";
export default {
? name: "ShowButton",
? data() {
? ? return {
? ? ? value: 2
? ? };
? },
? components: {
? ? Button
? },
? methods: {
? ? buttonClick() {
? ? ? console.log("value" + this.value);
? ? }
? }
};
</script>
<style>
</style>