Sample code for developing a button component in vue
This article mainly introduces the sample code for developing a button component in Vue. Now I will share it with you and give you a reference.
In a recent interview, I was asked a question about making a button component in Vue;
I just talked about the idea at the time and attached the code when I came back.
Solution:
Communication through parent-child components ($refs and props)
props accepts parameters, $refs calls Subcomponent method
To achieve click submit to change the button state, if unsuccessful, cancel the button state
Build under src/components/ A 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>is called on the page:
<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>Here, we should pay attention to some details:
1. The spacing between the button component and other p elements after it is formed, If it is determined within the component, it will be difficult to reuse.
2. When reusing, the style of the child component cannot be changed in the parent component. If you want to force the change, write a separate one and remove scoped.
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
Ajax core XMLHttpRequest summary
Solving the problem of ajax cross-domain request data cookie loss
Use ajax to change page content and address bar URL without refreshing
The above is the detailed content of Sample code for developing a button component in vue. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to install the Windows 10 old version component DirectPlay
Dec 28, 2023 pm 03:43 PM
Many users always encounter some problems when playing some games on win10, such as screen freezes and blurred screens. At this time, we can solve the problem by turning on the directplay function, and the operation method of the function is also Very simple. How to install directplay, the old component of win10 1. Enter "Control Panel" in the search box and open it 2. Select large icons as the viewing method 3. Find "Programs and Features" 4. Click on the left to enable or turn off win functions 5. Select the old version here Just check the box
Introduction to Python functions: Introduction and examples of exec function
Nov 03, 2023 pm 02:09 PM
Introduction to Python functions: Introduction and examples of exec function Introduction: In Python, exec is a built-in function that is used to execute Python code stored in a string or file. The exec function provides a way to dynamically execute code, allowing the program to generate, modify, and execute code as needed during runtime. This article will introduce how to use the exec function and give some practical code examples. How to use the exec function: The basic syntax of the exec function is as follows: exec
Why won't my laptop start up after pressing the power button?
Mar 10, 2024 am 09:31 AM
There could be several reasons why your Windows laptop won't boot. Memory failure, dead battery, faulty power button, or hardware issues are all common causes. Here are some solutions to help you resolve this issue. Laptop won't turn on after pressing the power button If your Windows laptop still won't turn on after pressing the power button, here are some steps you can take to resolve the issue: Is your laptop fully charged? Perform a hard reset to clean your laptop Reseat the memory Transparent CMOS type battery Take your laptop for repair. 1] Is your laptop fully charged? The first thing to do is to check if your laptop is fully charged. Laptop won't start if battery is drained
What does iPhone 16 look like? What changes are there in iPhone 16?
Apr 07, 2024 pm 05:10 PM
After the release of the iPhone 15 series, there have been constant revelations about the appearance and configuration of Apple’s new iPhone 16. What does iPhone 16 look like? Is there any improvement in iPhone 16? Recently, an overseas blogger showed off the design of the iPhone 16 series. The overall design is basically the same as the iPhone 15 series. As you can see from the picture, the entire iPhone 16 series is equipped with a new "shoot" button as standard, allowing users to take photos more conveniently. In addition, other design details are still unknown. The message shows that this new button will be used to shoot videos and is located below the power button. Previous news has mentioned that it may be a capacitive solid-state button, but recent reports indicate that it should still be a
Oracle DECODE function detailed explanation and usage examples
Mar 08, 2024 pm 03:51 PM
The DECODE function in Oracle is a conditional expression that is often used to return different results based on different conditions in query statements. This article will introduce the syntax, usage and sample code of the DECODE function in detail. 1. DECODE function syntax DECODE(expr,search1,result1[,search2,result2,...,default]) expr: the expression or field to be compared. search1,
How to solve the problem of unresponsive buttons in IE browser
Jan 30, 2024 am 10:48 AM
What should I do if there is no response when clicking the web button in IE browser? If there is no response when we click the web button, we can set it in the compatibility view! When some friends are using the IE browser, they find that the browser will not respond when clicking the button on the web page. In this way, we cannot use the functions of the web page. How can we set it up? The editor has compiled the IE browser below. How to solve the problem of the browser not responding when clicking the web button? If not, follow me and read on! IE browser does not respond when clicking the web button. Solution: 1. Open IE browser, click the [Tools] button on the operation bar, and click [Compatibility View] settings, as shown in the figure. 2. In the [Compatibility View] setting page, click the [Add] button on the right and fill in the website.
Go language indentation specifications and examples
Mar 22, 2024 pm 09:33 PM
Indentation specifications and examples of Go language Go language is a programming language developed by Google. It is known for its concise and clear syntax, in which indentation specifications play a crucial role in the readability and beauty of the code. effect. This article will introduce the indentation specifications of the Go language and explain in detail through specific code examples. Indentation specifications In the Go language, tabs are used for indentation instead of spaces. Each level of indentation is one tab, usually set to a width of 4 spaces. Such specifications unify the coding style and enable teams to work together to compile
Introduction to Python functions: Usage and examples of isinstance function
Nov 04, 2023 pm 03:15 PM
Introduction to Python functions: Usage and examples of the isinstance function Python is a powerful programming language that provides many built-in functions to make programming more convenient and efficient. One of the very useful built-in functions is the isinstance() function. This article will introduce the usage and examples of the isinstance function and provide specific code examples. The isinstance() function is used to determine whether an object is an instance of a specified class or type. The syntax of this function is as follows
