Preface
Components are one of the most powerful functions, and the scope of component instances is independent of each other, which means that data between different components cannot be referenced to each other. How to pass data has also become one of the important knowledge points of components.
Components
There are different relationships between components. The relationship between father and son and brotherhood (both not father and son are called brothers temporarily).
Parent-child component
Parent-son relationship is component A. When component B is used in its template, component A is the parent component and component B is the child component.
// Register a subcomponent('child', {
data: function(){
text: 'I am a child component of father! '
}
template: '<span>{{ text }}</span>'
})
// Register a parent component('father', {
template: '<div><child></child></div>' // Used child component in template})
When using the father component directly:
<div > <father></father> </div>
The page will render: I am a child component of father!
The father component uses the child component in the template, so it is the parent component, and the child component is used, so the child component is the child component.
Brothers Components
If the two components do not reference each other, they are sibling components.
('brother1', {
template: '<div>I am the eldest brother</div>'
})
('brother2', {
template: '<div>I am my younger brother</div>'
})
When using components:
<div > <brother1></brother1> <brother2></brother2> </div>
The page will be rendered:
I'm the big brother
I'm my little brother
Prop
If a child component wants to use the data of the parent component, we need to obtain the data transmitted by the parent component through the props option of the child component. Below I use the format in the .vue file to write an example.
How to pass data
Refer to the child component in the parent component and pass the value of name to the child component.
<template>
<div class="app">
// message is defined in the props of the child component <child :message="name"></child>
</div>
</template>
<script>
import child from './';
export default {
components: {
child
},
data() {
return {
name: 'linxin'
}
}
}
</script>
Declare the data it expects to obtain in the props option in the child component
<template>
<span>Hello {{message}}</span>
</template>
<script>
export default {
// Declare in props to obtain the data of the parent component and pass it through message props: ['message']
}
</script>
Then the page will be rendered: Hello linxin
One-way data flow
When the parent component's name changes, the child component will also automatically update the view. But in the child components, we should not modify the prop. If you have to modify this data, you can use the following methods:
Method 1:Assign prop to a local variable, and then if it needs to be modified, modify the local variable without affecting the prop
export default {
data(){
newMessage: null
},
props: ['message'],
created(){
= ;
}
}
Method 2:Process prop in computed properties
export default {
props: ['message'],
computed{
newMessage(){
return + ' Hahaha';
}
}
}
Custom events
prop is one-way bound: when the properties of the parent component change, it is passed to the child component, but not the other way around. Modifying the prop value of the child component will not be passed back to the parent component to update the view. So how do children communicate with parent components?
That is custom events. By listening for custom events in the parent component $on(eventName), when $emit(eventName) triggers the custom event in the child component, the parent component performs the corresponding operation.
For example, control the display of a pop-up subcomponent in the parent component. After pressing Close in the child component, tell the parent component to hide it, and then the parent component will perform an operation to hide the pop-up.
<template>
<div class="app">
// hide is a custom event. You can start the name by yourself, and you cannot have capital letters. You can use short horizontal lines. // @hide listener child component triggers a hide event, and the hideDialog method will be executed <dialog :is-show="show" @hide="hideDialog"></dialog>
<button @click="showDialog">Show pop-up box</button>
</div>
</template>
<script>
import dialog from './';
export default {
components: { dialog },
data() {
return {
show: false
}
},
methods: {
showDialog() {
= true;
},
hideDialog() {
= false;
}
}
}
</script>
In the child component:
<template>
<div class="dialog" v-show="isShow">
<p>Here is the pop-up subcomponent</p>
<button @click="toHide">Close the pop-up box</button>
</div>
</template>
<script>
export default {
// The camel-named prop needs to be converted into the corresponding short horizontal line spaced is-show props: ['isShow'],
methods: {
toHide(){
// The $emit method triggers the parent component's listening event this.$emit('hide');
}
}
}
</script>
This enables mutual communication between parent and child components.
Vuex
The above examples are all based on components of the parent-son relationship, but for other levels of relationships, it is more cumbersome to implement. Then at this time Vuex can better help you communicate in real time between various components. For Vuex, please check out another article from me:Vuex modularizes the status management of to-do items
Summarize
Component communication is not necessary to use Vuex. For some simple data transmission, prop can also be done. This article mainly records some basic knowledge points for component parameters, which can be used for practical purposes.notepad In this example, using prop to realize the display and hiding of subcomponents, and using vuex to realize data state management between components.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.