I. Introduction
As a front-end framework that is widely used in China - Vue, as a developer, it must be mastered, and the editor is a back-end staff. Due to the lack of front-end personnel in the company, I also learned Vue!
The essence of the framework lies in componentization!
A page is divided into several small components, which involves data transmission between components!
The more commonly used ones are: passing values between parent and child components, and the scene of passing values between brothers has not been encountered here, so this time I will use the common value passing of parent and child components as an example to talk about it!
2. Advantages of componentization
The advantages of Vue componentization mainly include the following aspects:
-
更好的代码复用性Through componentization, the functions are split into different modules, each module has a single responsibility, and the separation of code and decoupling of applications are realized. In this way, a component can be reused in multiple pages, which reduces code duplication and improves development efficiency.
-
更易于维护和升级Vue componentization allows developers to focus more on the function of each component, making it easier to maintain and upgrade the code. If a function is to be replaced in the system, only one component needs to be upgraded without changing the other components.
-
更好的灵活性和可复用性Vue componentization can bring better flexibility, and new pages can be quickly built by combining different components, so that even if the project requirements change, new functions can be quickly realized by reusing existing components.
-
更直观的数据流Due to the one-way flow of Vue data flow, it is easier for us to track the changes of data, so as to better manage the data state. Through the interaction between props and $emit of the component, the data transfer has certain specifications and restrictions, reducing the code coupling.
-
更易于进行分工合作Through componentization, different developers can be responsible for the development of different public components, which is conducive to the division of labor and cooperation of projects. Each developer only needs to focus on the development of the component he is responsible for, without interfering with the work of other component developers, which improves the development efficiency and quality of the project.
In short, Vue componentization can bring better code reusability, easy maintenance and upgrade, flexibility, intuitive data flow and division of labor, which is an inevitable choice for modern web development.
Three, actual combat
In Vue, there are many ways to pass values between parent and child components. This article introduces two of the more commonly used ways: props and $emit.
1. app.vue
Present our parent component in the root container!
<template>
<div id="app">
<ParentComponent></ParentComponent>
</div>
</template>
<script>
import ParentComponent from "@/views/ParentComponent";
export default {
name: 'App',
components: {
ParentComponent,
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
2. ParentComponent.vue
Here's the parent container:
components: { ChildComponent }: Introduce and register child components in the parent component so that they can be used in the template of the parent component.
:message="message": The message data of the parent component is passed to the child component, you need to use v-bind or abbreviated ":" to bind the data to the child component label
@updateNum="updateNum": The child component passes a custom event to the parent component, and the parent component can listen to this event and receive the passed data
<template>
<div>
<h1>这是子组件传过来的num数据: {
{ num }}</h1>
<ChildComponent :message="message" @updateNum="updateNum"></ChildComponent>
</div>
</template>
<script>
import ChildComponent from "@/components/ChildComponent";
export default {
name: "ParentComponent",
components: {
ChildComponent
},
data () {
return {
name: 'Vue.js',
message: '我是父组件的message',
num:0,
}
},
methods: {
updateNum (newNum) {
this.num = newNum
},
}
}
</script>
<style scoped>
</style>
3. ChildComponent.vue
Here's the subcomponent:
Subcomponents use: propsto receive data, variable names can be used directly
There are some parameters that can be added according to your own requirements:
| keywords | value | explain |
|---|---|---|
| type | String | Data types: String, Number, Boolean, Array, Object, Date, Function, Symbol |
| default | 'It's the default value' | If no value is passed, the default value |
| required | true | Is it required? |
this.$emit('updateNum', this.num): The child component can publish a custom event through the $emit method, and the parent component can listen to this event and receive the passed data without passing a value!
The first parameter must be consistent with the event name of the parent component! !
<template>
<div class="box">
<p>这是父传过来的数据：{
{ message }}</p>
<button @click="updateParentNum">点击+1</button>
</div>
</template>
<script>
export default {
name: "ChildComponent",
props: {
message: {
type: String,
default: '默认值',
required: true
},
},
data () {
return {
newMessage: '我是子组件的数据',
num: 0
}
},
methods: {
updateParentNum () {
this.num = ++ this.num
// 可以有值，可以不传递值
this.$emit('updateNum', this.num)
}
}
}
</script>
<style scoped>
.box{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 300px;
background-color: pink;
}
</style>
4. Effect
The message value of the parent component will be passed to the child component and displayed in the child component
Every time you click on the +1 of the child component, an event will be posted to the parent component and num will be passed to the parent component
Four. Summary
From the above two methods, it can be seen that props value transfer needs to pre-define the properties to be received in the child component, and v-bind or ":" should be used to bind when passing data in the parent component. However, $emit needs to publish a custom event in the child component to pass a value to the parent component. The parent component needs to listen to this event and obtain the passed data in the event handler.
In actual development, we need to choose which method to use for data transfer between parent and child components according to specific scenarios, so as to make our code more concise, efficient and stable.
If it is helpful to you, please move your little hands of making money and pay attention to the official account! ! thanks for your attention! ! Read the article first! ! !