The two-way binding between parent-child components is very simple, but many people may not know how to bind two-way because they are used since Vue 2+. Of course, the simplest two-way binding (in a single file) is the v-model of the form element, for example <input type="text" /> It will respond to the value attribute of the form element. When the input box text changes, the value value will be passed to the variable bound to v-model. If v-model and value are set at the same time, the value attribute is invalid.
Custom bidirectional v-model for parent-child components
When several doms are encapsulated into components, when using child components in the parent component, v-model cannot be used on the child component label because the child component label is not a form element. At this time, we need to customize the v-model rules we want.
<!-- -->
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default{
model:{
prop:'msg',//This field refers to the msg that passes the variable value to the child component when the parent component is set to v-model event:'parent-event'//This field refers to the parent component listening for parent-event events },
props:{
msg:String //The same props as the model's prop must be defined here, because v-model will pass the value to the child component },
mounted(){
//This simulates asynchronously passing msg to the parent component v-model to realize bidirectional control setTimeout(_=>{
let some = 'A certain value appears after 3 seconds';//A value of the child component itself this.$emit('praent-event',some);
//Try parent-event via emit, pass some to the variable bound to the v-model of the parent component },3000);
}
}
</script>
<!-- -->
<template>
<children v-model="parentMsg"></children>
</template>
<script>
import children from 'path/to/';
export default{
components:{
children
},
data(){
return{
parentMsg:'test'
}
},
watch:{
parentMsg(newV,oldV){
(newV,oldV);
//The console will output in three seconds //'A certain value that appears after 3 seconds','test' }
}
}
</script>
Have you learned to customize components with v-models? If it is an ordinary form element, similarly, listen for the input or change event of the form, and pass the value or checked in real time through $emit.
Custom multiple bidirectional values for parent and child components
The above example is to implement bidirectional binding of a single prop value. When the requirements of the component require complex operations and multiple bidirectional values, how is it implemented? Here we need to use the .sync modifier that was previously abandoned by vue and later returned.
In fact, this is simpler than v-model
<!-- -->
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default{
props:{
msg:String
},
mounted(){
//This simulates asynchronously passing msg to the parent component v-model to realize bidirectional control setTimeout(_=>{
let some = 'A certain value appears after 3 seconds';//A value of the child component itself this.$emit('update:msg',some);
//Transfer this value through emit //Update is a fixed field, connect the bidirectional bound msg through a colon, and pass some to the v-model bound variable of the parent component },3000);
}
}
</script>
<!-- -->
<template>
<children :="parentMsg"></children>
<!-- Here you only need to add the commonly used one-way transmission value.syncModifier -->
</template>
<script>
import children from 'path/to/';
export default{
components:{
children
},
data(){
return{
parentMsg:'test'
}
},
watch:{
parentMsg(newV,oldV){
(newV,oldV);
//The console will output in three seconds //'A certain value that appears after 3 seconds','test' }
}
}
</script>
It should be noted here that although adding .sync can enable two-way binding, you still need to rely on the child component $emit to trigger the update:prop name to modify the variable value of the parent component to achieve a bidirectional data flow. If you directly assign the prop attributes directly, an error will still occur.
In fact, the .sync modifier is an abbreviation, which does one thing
<template> <children :="parentMsg"></children> <!-- Equivalent to --> <children :msg="parentMsg" @updata:msg="parentMsg = $event"></children> <!-- Here$eventIt's a subcomponent$emitPassed parameters --> </template>
When you need to pass all the properties in an object into a bidirectional data stream through .sync, you can write it in a simpler way
<template>
<children :.sync="obj"></children>
</template>
<script>
export default{
components:{
children
},
data(){
return{
obj:{
parentMsg:'test'
}
}
}
}
</script>
When using this writing method, all attributes in the obj object will be passed to the subcomponent through independent props, and the corresponding update: is listened to. At this time, the corresponding props must also be declared in the subcomponent.
Summarize
The above is the implementation method of Vue parent-child component bidirectional binding value transmission that the editor introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!