v-model introduction
Friends who are familiar with Vue know that v-model is a big feature of Vue and can realize two-way data binding. But essentially, it's nothing more than syntactic sugar, which is responsible for listening to user input events to update data.
The following is extracted from the official Vue document
v-model internally uses different properties for different input elements and throws different events:
- text and textarea use value attributes and input events;
- checkbox and radio use checked attributes and change events;
- The select field takes value as prop and change as event.
How to cleverly use v-model to implement parent-child component value transmission
Usually, when a child component is updated and needs to be informed of the parent component, the child component needs to trigger an event and the parent component listens for the event.
However, after being familiar with the above implementation principle of v-model, we can cleverly apply this principle (v-model uses different attributes to different input elements internally and throws different events).
Method summary:
1.Set value as props attribute for the child component and do not actively change the value value
2. The child component passes the updateValue value to the parent component through this.$emit('input', 'updateValue')
3. The parent component binds a local variable through v-model="localValue" to achieve synchronous update of the child component value and the parent component updateValue value.
Give an example
Subcomponents
A child component, contains a button, and set the value property to props (because v-model uses the value property).
When clicking button, add 1 to the sum value, and pass the updated value to the parent component through this.$emit('input', ++sum) (prerequisite: the value passed to the parent component must be what you want to assign to the value)
<template>
<div>
<button @click="increase" style="border: 1px solid black">increase</button>
</div>
</template>
<script>
let sum = 0
export default {
name: 'vmodel',
props: {
value: {
type: Number,
default: 0
}
},
methods: {
increase () {
this.$emit('input', ++sum)
('value1', )
setTimeout(() => {
('value2', )
}, 50)
}
}
}
</script>
Parent component
In the parent component, a local variable is bound by v-model to achieve synchronous update of the child parent component.
<div>
<increase v-model="rangeValue"></increase>
<p>value:{{rangeValue}}</p>
</div>
<script>
data () {
return {
rangeValue: 0
}
}
</script>
In fact, this process is that the child component first updates the parent component's local variables through $emit('input'), and then the value attribute in the child component is updated through props
Summarize
This method is especially suitable for the case where child and parent components pass parameters (sub-parent components are updated simultaneously)
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.