vue3中sync修饰符的使用

props是子组件与父组件进行通信的常用方式，使用步骤主要有以下几个：   

 1. 在子组件中定义props要从父组件接收的变量（变量的类型必须写明，默认值可选）

// 这里以 document.vue 子组件为例
// 通过 defineProps 宏的方式声明， props 接受父组件传递过来的数据
const props = defineProps({
  title: {
    type: String,
    default: 'Default title'
  }
})

 2. 父组件引入子组件，并绑定父组件的变量传递给子组件。

// 这里 App.vue 为父组件
import document from './components/document.vue'
const title = ref("标题")

// ......
<document :title="title"></document>

3. 在子组件中分别打印props和使用props中的数据。

console.log("props: ", props);
 // ......
// 在template 模板中不需要通过props.title方式获取
<template>
<div> {{ title }} </div>
</template>

子组件欲更改父组件数据时，首先必须明确一个原则：谁的数据谁来维护，不能直接通过props来修改（虽说可以改变，但不允许，破坏了数据单向流）。官方给我们提供了emits去处理子组件向父组件数据通信的问题，分为以下几个步骤：

1. 在子组件中定义emits要向父组件触发的事件（事件可以有多个）。

// 通过 defineEmits 宏的方式声明
const emit = defineEmits(['update:title'])

2. 子组件手动触发事件，并传入更新的数据。

// document.vue
<button @click="changeTitle()">click</button>

// ......
const changeTitle = (newTitle = “新标题”) => {
  emit('update:title', newTitle)
}

3. 父组件在子组件标签中绑定同名的事件，并赋值为更新后的数据。

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

这里的事件名“update:eventName”为固定写法，vue于v2.3引入sync修饰符，省去了在组件标签内写@update函数。

使用sync修饰符：

// App.vue
 <document :title.sync="title" @change-title="(v) => title = v"></document>
<!--    <document :title.sync="title" @changeTitle="(v) => title = v"></document>-->
<!--    <document :title.sync="title" @ChangeTitle="(v) => title = v"></document>-->

// document.vue 添加 changeTitle 事件
const emit = defineEmits(['update:title', 'changeTitle'])

 另外这里绑定的changeTitle事件为kebab-case（短横线命名），驼峰和大驼峰命名均可。