1. V-model functions: The V-Model is essentially a syntax sugar, V-model is a way for parent and child components to communicate with each other. It is much more convenient than the traditional method of telling the parent component to emit and telling the parent component to emit and telling the parent component to listen for the event via this. emit in the child component

<com1 v-model="num"</com1> is equivalent to <com1 :value="num" @input="(val)=>this.num=val"></com1>
Copy the code

3.. sync function: Implements bidirectional data binding between parent and child components, similar to v-Model ****. This modifier is the syntactic sugar used by the vUE wrapped child component to modify the dynamic value sent by the parent component, eliminating the need for the parent component to write, but adding the update 4.. sync modifier to the child component when emit

// Normal father to child:
<com1 :a="num" :b="num2"></com1>

// Add sync from father to child:
<com1 :a.sync="num" .b.sync="num2"></com1> 

// It is equivalent to
<com1 
  :a="num" @update:a="val=>num=val"
  :b="num2" @update:b="val=>num2=val"></com1> 

Update :a callback assigns the received value to the data item in the property binding.
Copy the code

Details are as follows:

// The parent component passes a title value to the child component
<template>
    <div>  
        <t-title :title.sync="fatherTitle"></t-title>
    </div>
</template>
<script>
import tTitle from './blocks/list';
export default {
    name: 'test1'.components: {  tTitle },
    data() {
        return {
            fatherTitle: 'Title given by parent component'}; }},</script>
Copy the code
/ / child component
<template>
    <div>
        <h3>{{ title }}</h3>
        <button @click="changeTitle">change</button>
    </div>
</template>
<script>
export default {
    props: {title: {type: String.default: 'Default value 11'}},methods: {
        changeTitle() {
            this.$emit("update:title"."Child component to change its own title"); }}};</script>
Copy the code

The key here is to write the emit parameter as ‘update’+ ‘:’ +’ props to be modified ‘

5. The difference between Sync and V-Model is

Similarities: both are syntactic sugar, and both can realize two-way communication of data in parent and child components.

The mark:

- Different formats. 'v-model="num", :num. Sync ="num"' -v -model: @input + value - :num. .sync can have more than one.Copy the code