最近面試，被問到一個題目，vue做一個按鈕組件；
當時只是說了一下思路，回來就附上代碼。
解決思路：
在src/components/ 下建一個button.vue
<template><!-- use plane --><!-- 傳入bgColor改變按鈕背景色 --><!-- state切換button的狀態 調用cancel()可以切換 --><!-- text為按鈕文字 --> <div class="container"> <button @click="confirm" :disabled="state" class="confirm" :style="{background: btnData.bgColor}" >{{text}}</button> </div></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> <div class="btn-box"> <Btn :btnData="{text: '確認注冊'}" <!--這里就要掛載$emit調用的事件 @confirm="想要調用事件的名字"--> @confirm="confirm" ref="btn" ></Btn> </div> </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組件形成之后和其它div元素的間距，如果是在組件內定死是很難復用的。
2. 在復用的時候，在父組件中是改變不了子組件的樣式的，如果要強制更改，單獨寫一個并去掉scoped。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
