A brief analysis of the implementation of bidirectional data binding of parent-child components through v-model in Vue3 and the use of computed to simplify bidirectional binding of parent-child components

1. How does the function of the sync modifier in vue2 be presented in vue3?

1. Review of sync modifiers

1. vue rules: props are bound one-way downward, and subcomponents cannot modify the external data received by props.

2. If you modify props in a child component, Vue will issue you a warning. (The parent component cannot be changed by modifying the props of the child component.) If you need to notify the parent component to update synchronously when the child component updates data, you need to combine $emit and v-on implementation.

3. The function of the sync modifier is to simplify the writing of event declarations and monitoring.

As shown in the following example, compare the writing method of sync and normal modification of data notifications to the outer layer: You can see that the sync modifier is indeed much simpler.

// Parent component<template>
    <div> quantity： {{num}}</div>
    <!-- <ChildComponent :num="num" @increase="num = $event"/> -->
    <ChildComponent :="num" />
</template>

//Subcomponent<template>
    <div @click="addNum"> 接收quantity： {{num}}</div>
</template>
<script>
export default {
    props: ['num'],
    // data() {
    //    return {
    //        childNum: 
    //    }
    // },
    methods: {
        addNum() {
            // this. childNum++
            // this.$emit('increase', this. childNum)
            this.$emit('update:num',  + 1)
        }
    }
}

2. How to write and use the syntax sugar function of sync in vue3?

In vue3,Implement two-way binding of data between custom components through v-model:propName. How to use:

(1) The parent component passes data attributes through "v-model: bound attribute name", and supports binding multiple attributes;

(2) Subcomponent configuration emits, and update events are defined through the format of "update: attribute name"

2. How to implement bidirectional data binding of parent-child components through v-model

The bidirectional data binding writing method of Vue3 parent-child components has been changed, and it also supports multiple data bidirectional binding.

1. Bidirectional binding of single data

// Parent component// When v-model does not specify a parameter name, the default parameter name of the child component is modelValue<ChildComp v-model="search" />

What should be noted is:

(1) The subcomponent does not directly use the variable passed by props, but needs to declare a responsive variable - declare responsive data based on the variable value passed by props as the initialization value.

(2) And if the parent component passes asynchronous data, it is also necessary to listen to it.

(3) When the child component data changes, you need to modify the parent component data to achieve two-way binding.

<template>
  <div>
    <input v-model="sea" @input="valChange(sea)" />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
export default defineComponent({
  name: 'ChildComp',
  props: {
    modelValue: { // The parent component v-model does not specify a parameter name, so the default is modelValue      type: String,
      default: ''
    }
  },
  setup (props, { emit }) {
    // input initialization    const sea = ref()
    // If the data transmitted by the parent component is obtained asynchronously, it is necessary to listen    watch(() => , () => {  =  })
    // Two-way data binding    function valChange (e: string) {
      emit('update:modelValue', e)
    }
    return {
      sea,
      valChange
    }
  }
})
</script>

2. Bidirectional binding of multiple data - not much different from single data binding

// Parent component<ChildComp v-model="search" v-model:address="addr" />

// The subcomponent corresponds toprops: {
modelValue: { // The parent component v-model does not specify a parameter name, so the default is modelValuetype: String,
default: ''
},
address: {  // The parent component v-model has a specified parameter name, which is the specified parameter nametype: String,
default: ''
}
},

// input initializationconst sea = ref()
const add = ref()
 
// If the data transmitted by the parent component is obtained asynchronously, it is necessary to monitor itwatch(() => , () => {  =  })
watch(() => , () => {  =  })
 
// Two-way data bindingemit('update:modelValue', e)
emit('update:address', e)

3. Use computered to simplify bidirectional data binding of parent-child components

The above is to declare responsive data through ref, which can actually simplify operations by computed calculation of properties. as follows:

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:modelValue'])
const show = computed({
  get() {
    return 
  },
  set(v) {
    emit('update:modelValue', v)
  }
})

This is the article about a brief analysis of the bidirectional data binding of parent-child components in Vue3 through v-model and simplifying bidirectional binding of parent-child components using computed. For more related bidirectional binding of Vue3 parent-child components, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!