Detailed explanation of the use of sync modifiers in vue3

Props is a common way for child components to communicate with parent components. The main steps are as follows:

1. Define the variable that props are to receive from the parent component in the child component (the type of the variable must be stated, and the default value is optional)

// Take the subcomponent as an example here// Declare through the defineProps macro, props accepts the data passed by the parent componentconst props = defineProps({
  title: {
    type: String,
    default: 'Default title'
  }
})

2. The parent component introduces the child component and binds the parent component to pass the variables to the child component.

// Here is the parent componentimport document from './components/'
const title = ref("title")
// ......
<document :title="title"></document>

3. Print props and use data in props in the subcomponents respectively.

("props: ", props);
 // ......
// There is no need to obtain it in the template template<template>
<div> {{ title }} </div>
</template>

When a child component wants to change the parent component data, one principle must be clarified:Whose data will be maintained, cannot be modified directly through props (although it can be changed, it does not allow it, destroying the one-way data flow). The official provides us with emits to handle the problem of data communication between child components and parent components, which is divided into the following steps:

1. Define the event in the child component that emits is to be triggered to the parent component (the events can have multiple events).

// Declare through the defineEmits macroconst emit = defineEmits(['update:title'])

2. The child component triggers the event manually and passes in the updated data.

// 
<button @click="changeTitle()">click</button>
// ......
const changeTitle = (newTitle = “New title”) => {
  emit('update:title', newTitle)
}

3. The parent component binds events with the same name in the child component label and assigns them to the updated data.

// 
<document :title="title" @update:title="(v) => title = v"></document>

The event name "update:eventName" here is a fixed writing method. vue introduces sync modifier in v2.3, eliminating the writing of @update function in component tags.

Use the sync modifier:

// 
 <document :="title" @change-title="(v) => title = v"></document>
<!--    <document :="title" @changeTitle="(v) => title = v"></document>-->
<!--    <document :="title" @ChangeTitle="(v) => title = v"></document>-->
// Add changeTitle eventconst emit = defineEmits(['update:title', 'changeTitle'])

In addition, the changeTitle event bound here is kebab-case (short horizontal line name), and the camel and big camel can be named.

This is the end of this article about the detailed explanation of the use of sync modifiers in vue3. For more related content on the use of sync modifiers, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!