Web Front-end
JS Tutorial
A brief discussion on the application scenarios of Vue's built-in component components
A brief discussion on the application scenarios of Vue's built-in component components
This article mainly introduces the application scenarios of Vue's built-in component components. Now I will share it with you and give you a reference.
Official instructions
Render a "meta component" as a dynamic component. Which component is rendered depends on the value of is.
<!-- 动态组件由 vm 实例的属性值 `componentId` 控制 --> <component :is="componentId"></component>
For details, please refer to the official website documentation
Dynamic components
Built-in component component
Scenario
Here is a business scenario to illustrate the application of Vue's built-in component components. As shown in the figure, the classic registration page is shown here. Registration is divided into email registration and mobile phone registration. There is a label at the top of the pop-up window to switch the registration type. In the middle is the registration form information. Email registration and mobile phone registration have different form contents. The bottom is Register button and other actions. After analysis, the mobile phone registration interface and the email registration interface are the same except for the inconsistent content of the form in the middle.
#In actual project code design, there are some feasible solutions to ensure reusability and maintainability. Here we use vue's built-in component component to achieve this.
Core code implementation
When the top tab is switched, the type value changes, and the corresponding form components also change
<template>
<p>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" @click.prevent="handleCloseBtnClick"></a>
<p>
<h3>新用户注册</h3>
<p>
<span :class="{active: type === 'mobileForm'}" @click="type = mobileForm">手机注册</span>
<span :class="{active: type === 'emailForm'}" @click="type = emailForm">邮箱注册</span>
</p>
</p>
<component :is="type" ref="form">
<button @click="handleRegisterBtnClick">注册</button>
<p ><span ><span>注册视为同意</span><a> 《法律条款和隐私说明》</a></span></p>
<p><span>已有账号<a href="javascript:;" rel="external nofollow" rel="external nofollow" @click.prevent="handleLoginBtnClick">直接登入>></a></span></p>
</component>
</p>
</template>
<script>
export default {
methods: {
handleRegisterBtnClick () {
this.$refs.form.validateData().then(() => {
this.$refs.form.getFormData()
})
}
}
}
</script>mixins mixing
When using Vue’s built-in component components, generally the components that are actually rendered have certain commonalities, such as the same attributes, the same method or the same initialization and destruction process. For example, in the current scenario, both the email form and the mobile phone form have a verification method (validateData) and a method for obtaining form data (getFormData). In this case, you can use the mixing function provided by vue. Further abstraction mixins.js
export default {
methods: {
validateData() {
return Promise.resolve()
},
getFormData() {
return {}
}
}
}email-form.vue
<script>
import minx from './mixins'
export default {
mixins: [mixins],
methods: {
getFormData() {
return { email: 'example@example.com' }
}
}
}
</script>If you have custom requirements, you can override the methods in mixins.
Application of tables
In management background projects, tables are often used. We hope that the td of the table is text, progress bar, checkbox, etc., and we hope that it can be rendered by passing a json configuration. Using vue's built-in component component can play a great role.
For example, how to use a table like this
<template>
<vue-table ref="table" :columns="columns" :datum="datum"></vue-table>
</template>
<script>
export default {
data () {
return {
columns: [
{ title: 'ID', width: '30', dataKey: 'id' },
{ title: '进度组件', dataKey: 'progress', render: { type: 'progress2', max: 100, precision: 2 } }
],
datum: [{ id: '1', name: '进度0', progress: 10 }]
}
}
}
</script>The implementation of using component in table
<td v-for="column of columns">
<component :is="`${TYPE_PRE}${columns.render.type}`" :row-data="rowData" :params="columns.render"></component>
</td>Application of forms
In management background projects, forms are often used. We also hope that one of the items in the form is a text box, a drop-down box, and a time selection. Box, rich text, etc., and hope that it can be rendered by passing a json configuration. Vue's built-in component component can still realize such a beautiful vision.
For example, how to use a form like this
<template>
<c-form :cells="cells" ref="form">
<button class="button is-primary" :class="{ 'is-disabled': isSubmitBtnDisabled }" @click.prevent="submit">提交</button>
</c-form>
</template>
<script>
export default {
computed: {
cells () {
return [
{
field: 'name',
label: '名称',
type: 'textfield',
attrs: { placeholder: '名称' },
validate: { required: { message: '请输入名称'} }
},
{
field: 'enable',
label: '启用标志',
type: 'dropdown',
extra: {options: [{ label: '启用', value: 1 }, { label: '禁用', value: 2 }] }
}
]
}
}
}
</script>The implementation of using component in form
<form>
<c-form-cell v-for="cell of cellList" :key="cell.field" :field="cell.field">
<component
:is="`${TYPE_PRE}${cell.type}`"
:field="cell.field"
:attrs="cell.attrs"
:extra="cell.extra"
:validate="cell.validate"
:cells="cell.cells">
</component>
</c-form-cell>
</form>The above is I compiled it for everyone, I hope it will be helpful to everyone in the future.
Related articles:
How to implement ASP.NET and Ajax
Ajax asynchronous upload in jquery
Detailed explanation of ajax synchronization and asynchronousness in jquery
The above is the detailed content of A brief discussion on the application scenarios of Vue's built-in component components. 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 Undo Delete from Home Screen in iPhone
Apr 17, 2024 pm 07:37 PM
Deleted something important from your home screen and trying to get it back? You can put app icons back on the screen in a variety of ways. We have discussed all the methods you can follow and put the app icon back on the home screen. How to Undo Remove from Home Screen in iPhone As we mentioned before, there are several ways to restore this change on iPhone. Method 1 – Replace App Icon in App Library You can place an app icon on your home screen directly from the App Library. Step 1 – Swipe sideways to find all apps in the app library. Step 2 – Find the app icon you deleted earlier. Step 3 – Simply drag the app icon from the main library to the correct location on the home screen. This is the application diagram
The role and practical application of arrow symbols in PHP
Mar 22, 2024 am 11:30 AM
The role and practical application of arrow symbols in PHP In PHP, the arrow symbol (->) is usually used to access the properties and methods of objects. Objects are one of the basic concepts of object-oriented programming (OOP) in PHP. In actual development, arrow symbols play an important role in operating objects. This article will introduce the role and practical application of arrow symbols, and provide specific code examples to help readers better understand. 1. The role of the arrow symbol to access the properties of an object. The arrow symbol can be used to access the properties of an object. When we instantiate a pair
From beginner to proficient: Explore various application scenarios of Linux tee command
Mar 20, 2024 am 10:00 AM
The Linuxtee command is a very useful command line tool that can write output to a file or send output to another command without affecting existing output. In this article, we will explore in depth the various application scenarios of the Linuxtee command, from entry to proficiency. 1. Basic usage First, let’s take a look at the basic usage of the tee command. The syntax of tee command is as follows: tee[OPTION]...[FILE]...This command will read data from standard input and save the data to
Angular components and their display properties: understanding non-block default values
Mar 15, 2024 pm 04:51 PM
The default display behavior for components in the Angular framework is not for block-level elements. This design choice promotes encapsulation of component styles and encourages developers to consciously define how each component is displayed. By explicitly setting the CSS property display, the display of Angular components can be fully controlled to achieve the desired layout and responsiveness.
Explore the advantages and application scenarios of Go language
Mar 27, 2024 pm 03:48 PM
The Go language is an open source programming language developed by Google and first released in 2007. It is designed to be a simple, easy-to-learn, efficient, and highly concurrency language, and is favored by more and more developers. This article will explore the advantages of Go language, introduce some application scenarios suitable for Go language, and give specific code examples. Advantages: Strong concurrency: Go language has built-in support for lightweight threads-goroutine, which can easily implement concurrent programming. Goroutin can be started by using the go keyword
The wide application of Linux in the field of cloud computing
Mar 20, 2024 pm 04:51 PM
The wide application of Linux in the field of cloud computing With the continuous development and popularization of cloud computing technology, Linux, as an open source operating system, plays an important role in the field of cloud computing. Due to its stability, security and flexibility, Linux systems are widely used in various cloud computing platforms and services, providing a solid foundation for the development of cloud computing technology. This article will introduce the wide range of applications of Linux in the field of cloud computing and give specific code examples. 1. Application virtualization technology of Linux in cloud computing platform Virtualization technology
Understanding MySQL timestamps: functions, features and application scenarios
Mar 15, 2024 pm 04:36 PM
MySQL timestamp is a very important data type, which can store date, time or date plus time. In the actual development process, rational use of timestamps can improve the efficiency of database operations and facilitate time-related queries and calculations. This article will discuss the functions, features, and application scenarios of MySQL timestamps, and explain them with specific code examples. 1. Functions and characteristics of MySQL timestamps There are two types of timestamps in MySQL, one is TIMESTAMP
Apple tutorial on how to close running apps
Mar 22, 2024 pm 10:00 PM
1. First we click on the little white dot. 2. Click the device. 3. Click More. 4. Click Application Switcher. 5. Just close the application background.
