vue3中sync修饰符的使用详解
作者：CamphorBloom
.sync修饰符是Vue中用于实现子组件修改父组件传递的props值并更新到父组件的功能,它实际上是一个语法糖,将子组件的props绑定到一个名为update:propName的自定义事件上,本文给大家介绍了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（短横线命名），驼峰和大驼峰命名均可。
到此这篇关于vue3中sync修饰符的使用详解的文章就介绍到这了,更多相关vue3 sync修饰符使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！