Vue3 is a popular JavaScript framework that provides a way to create Single File Components (SFC). Single-file components are a development pattern that encapsulates templates, scripts, and styles in one file, which can improve code readability and maintainability. This article will detail how to create and use single-file components in Vue3.
Install Vue CLI
Before we start, we need to install Vue CLI, which is a command-line tool for quickly building Vue projects. It can be installed with the following command:
npm install -g @vue/cli
After the installation is complete, we can use vue --versionthe command to verify that Vue CLI is installed successfully.
create project
After installing Vue CLI, we can use it to create a new Vue3 project. Open a terminal and execute the following command:
vue create my-project
Then, follow the prompts to select a preset configuration or manually configure items. After the project is created, enter the project directory:
cd my-project
Create single-file components
In Vue3 projects, we can use .vuefiles with suffix to create single-file components. Each single-file component consists of three parts: templates, scripts, and styles.
template
In single-file components, the template part is written using HTML syntax, describing the structure and layout of the component. You can use Vue's template syntax to bind data and handle events.
<template>
<div>
<h1>{
{ message }}</h1>
<button @click="increment">Increment</button>
</div>
</template>
In the above code, we use the double curly brace syntax {
{}}to bind data, and use @clickthe directive to listen to the click event of the button.
screenplay
The script part is written in JavaScript and contains the logic code of the component. Functions can be used setupto define component states, methods, and lifecycle hooks.
<script>
import {
ref } from 'vue'
export default {
setup() {
const message = ref('Hello, Vue3!')
const increment = () => {
message.value += '!'
}
return {
message,
increment
}
}
}
</script>
In the above code, we use refthe function to create a reactive variable messageand define a incrementmethod called .
style
The styling section is written in CSS and is used to look and style the component. Style definitions can be made using regular CSS syntax.
<style>
h1 {
color: blue;
}
button {
background-color: lightblue;
}
</style>
In the above code, we use CSS selectors to select elements and set different styles.
Use single-file components in components
After creating a single-file component, we can import and use it in other components or pages. First, you need to importimport the single-file component using the statement:
import MyComponent from './MyComponent.vue'
Then, use the custom component in the parent component's template:
<template>
<div>
<h2>Parent Component</h2>
<my-component></my-component>
</div>
</template>
Note that we use the custom component name my-componentas the tag name in the template.
Finally, register and use the custom component in the script of the parent component:
<script>
import MyComponent from './MyComponent.vue'
export default {
components: {
MyComponent
}
}
</script>
componentsRegister and declare custom components to use via the option.
Summarize
In this article, we detailed how to create and use single-file components in Vue3. Single-file components can encapsulate templates, scripts, and styles in one file, which improves the readability and maintainability of the code.
We learned the three parts of single-file components: templates, scripts, and styles, and demonstrated how to introduce and use single-file components in components.