vue3中sync修饰符的使用详解

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

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

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

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

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

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

// 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'])