The implementation of two-way binding and value passing of Vue parent-child components

In some ways, it is not allowed to pass values from the parent component to the child component for receiving, and then change them in the child component. You will find that vue will also directly report errors, and when encapsulating some components, you want to achieve bidirectional data binding, which can better control and use. Two methods are found on the Internet, one is to use v-model and the other is. sync
Here I recommend. sync

Reason: v-mode can only carry out a single bidirectional binding value, while. sync can support multiple bidirectional binding values. Of course, which can be distinguished by referring to your own usage scenarios

Here I'm going to write an example of two-way binding of parent-child data through. sync
The code is as follows:
This is the parent component

<template>
  <div class="home">
    <!-- In this case, you only need to add the one-way transmission value commonly used in ordinary times.sync Modifier -->
    <HelloWorld :msg.sync="parentMsg" :msg2.sync="parentMsg2" />
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
    name: 'home',
    data(){
        return{
            parentMsg:'test',
            parentMsg2:'test2'
        }
    },
    watch:{
        // Monitor the change of data and output the changed value of newV and the value before the change of oldV
        parentMsg(newV,oldV){
            console.log(newV,oldV);
        },
        parentMsg2(newV,oldV){
            console.log(newV,oldV);
        }
    },
    components: {
        HelloWorld
    }
}
</script>

Sub components

<template>
    <div>
        <h1>{{ msg }}</h1>
        <h1>{{ msg2 }}</h1>
        <button @click="fn()">click</button>
    </div>
</template>
<script>
 
export default{
    props:{
        msg:String,
        msg2:String
        
    },
    methods:{
        fn(){
            let some = 'Zhang San';
            let some2 = 'Li Si';
            // Pass this value through exit
            // update is a fixed field, connecting the two-way bound msg through a colon, passing some to the v-model bound variable of the parent component
            this.$emit('update:msg',some);
            this.$emit('update:msg2',some2);
        }
    }
}
</script>

It should be noted here that although. sync can be used for two-way binding, it still depends on the sub component $emit to trigger the update:prop name to modify the variable value of the parent component to realize two-way data flow. If the property of prop is directly assigned, an error will still be reported.

In fact, the. sync modifier is a shorthand that does one thing

<template>
 <HelloWorld :msg.sync="parentMsg" :msg2.sync="parentMsg2" />
 <!-- Equivalent to -->
 <HelloWorld :msg="parentMsg" @updata:msg="parentMsg = $event"></HelloWorld>
 <!-- There $event It's a subcomponent $emit Parameters passed -->
</template>
Link: https://www.jianshu.com/p/93c89e7066df

Tags: Front-end Vue

Posted on Fri, 13 Mar 2020 11:56:32 -0400 by TheDefender