1 Introduction
Vue is one of the most popular JavaScript frameworks out there, and it provides a clean and efficient way to build user interfaces. In Vue, components are one of the core concepts for building applications. Components can encapsulate reusable blocks of code, making the code easier to maintain and extend. Vue3 is the latest version of Vue.js and many new features and improvements have been introduced in this version. This article will introduce the components in Vue3 in detail, including component definition, component properties and events, component Slots and dynamic components and other related content.
2. Basic concept of components
In Vue, components are reusable Vue instances that can be used multiple times in an application. Components can encapsulate HTML, CSS, and JavaScript code and reuse them when needed. Components can have their own templates, data, methods, and lifecycle hooks.
2.1 Definition of components
There are two ways to define components in Vue3: through object literals or through defineComponentfunctions.
Define components via object literals
Here's an example of defining a component via an object literal:
const MyComponent = {
template: '<div>Hello, Vue3!</div>'
}
In the above code, we define a component MyComponentwith a templateproperty whose value is an HTML string. This HTML string will serve as the component's template.
Define components through defineComponentfunctions
Here's defineComponentan example of defining a component via a function:
import { defineComponent } from 'vue'
const MyComponent = defineComponent({
template: '<div>Hello, Vue3!</div>'
})
In the above code, we defineComponentdefine a component using MyComponenta function that receives an object as a parameter, which contains the properties and methods of the component.
2.2 Use of components
In Vue, using components is very simple. Just use the component tag in the template. Here's an example using a custom component:
<template>
<div>
<h1>My App</h1>
<my-component></my-component>
</div>
</template>
<script>
import MyComponent from './MyComponent.vue'
export default {
components: {
MyComponent
}
}
</script>
In the above code, we used <my-component>tags in the template of the parent component to import MyComponentthe component. Also, in the JavaScript section of the parent component, pass componentsoptions to MyComponentregister as child components.
3. Component properties and events
3.1 Properties
In Vue, components can propsreceive data passed by parent components through properties. Component properties can be passed dynamically by the parent component and used in the component. Here's an example of receiving properties:
<template>
<div>
<h1>{
{ title }}</h1>
</div>
</template>
<script>
export default {
props: ['title']
}
</script>
In the above code, we define a property to receive titlevia propsoptions. Used in templates {
{ title }}to display the value of an attribute.
In the parent component, data can be passed to the child component by binding properties. Here's an example of passing attributes:
<template>
<div>
<child-component :title="parentTitle"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
data() {
return {
parentTitle: 'Hello, Vue3!'
}
},
components: {
ChildComponent
}
}
</script>
In the above code, we bind the data of the parent component parentTitleto the properties :titleof the child component title.
3.2 Events
Components can $emittrigger custom events through methods and pass data to parent components. Parent components can listen to these custom events and respond accordingly. Here's an example of firing and listening to events:
<template>
<div>
<button @click="handleClick">Click Me</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
this.$emit('customEvent', 'Hello, Vue3!')
}
}
}
</script>
In the above code, when the button is clicked, handleClickthe method is triggered, and a custom event named $emitis triggered through the method , and the data is passed .customEventHello, Vue3!
Parent components can listen to this custom event by using the v-onor directive on the child component's label . @Here is an example of listening to events:
<template>
<div>
<child-component @customEvent="handleCustomEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
methods: {
handleCustomEvent(data) {
console.log(data) // 输出：Hello, Vue3!
}
},
components: {
ChildComponent
}
}
</script>
In the above code, we @customEventlistened to the events triggered in the subcomponents customEventand handleCustomEventreceived the data passed by the events in the method.
4. Slots of components
Slots allow for the insertion of additional content into components, similar to subcomponents in React. Slots can help us better encapsulate components and provide greater flexibility. Here is an example using Slots:
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {}
</script>
In the above code, we use <slot></slot>a tag in the component's template, which represents a slot for inserting the content passed by the parent component.
When using components, you can add content to be inserted inside the component tag. Here is an example using Slots:
<template>
<div>
<my-component>
<h1>My Title</h1>
<p>My Content</p>
</my-component>
</div>
</template>
<script>
import MyComponent from './MyComponent.vue'
export default {
components: {
MyComponent
}
}
</script>
In the above code, we inserted a <h1>label and a <p>label through the label of the component, and these contents will be inserted into MyComponentthe slot of the component.
5. Dynamic components
In Vue, dynamic components allow switching between multiple components. Different components can be rendered dynamically based on different conditions. Here's an example using dynamic components:
<template>
<div>
<component :is="currentComponent"></component>
<button @click="switchComponent">Switch</button>
</div>
</template>
<script>
import FirstComponent from './FirstComponent.vue'
import SecondComponent from './SecondComponent.vue'
export default {
data() {
return {
currentComponent: 'first'
}
},
components: {
FirstComponent,
SecondComponent
},
methods: {
switchComponent() {
this.currentComponent = this.currentComponent === 'first' ? 'second' : 'first'
}
}
}
</script>
In the above code, we :isdynamically rendered two components through the properties: FirstComponentand SecondComponent. By clicking the button, it is possible to switch between the two components.
6. Life cycle hook function
The lifecycle hook functions of Vue components are specific functions that will be called at different stages of the component. In Vue3, the component's lifecycle hook function has changed. The following are some commonly used lifecycle hook functions:
beforeCreate: It is called before the instance is created, and the data observation and initialization events have not yet started.created: It is called after the instance is created. At this time, the data observation and initialization events have been completed, but it has not yet been mounted on the DOM.beforeMount: Called before mounting, when template compilation is complete.mounted: It is called after the mounting is completed, and the component has been mounted on the DOM at this time.beforeUpdate: Called before update, when the data has been updated, but the DOM has not been re-rendered.updated: Called after the update is complete and the component has re-rendered.beforeUnmount: Called before unmounting, when the component has not been unmounted from the DOM.unmounted: Called after the unmount is complete, the component has been unmounted from the DOM.
7. Summary
This article introduces the components in Vue3 in detail, including the definition of components, the use of components, the properties and events of components, the slots and dynamic components of components, and the lifecycle hook functions. Components are a very important concept in Vue development, which can improve code reusability and maintainability. By rationally using components, we can build feature-rich and interactive applications more efficiently. I hope that through the introduction of this article, you have a deeper understanding and mastery of the components in Vue3. In the actual development, a lot of practice and practice, I believe you can better use the components of Vue3 to develop excellent applications!