.sync是什么？读完这一篇就搞懂了【vue前端】

.sync是什么 :

在 Vue 2 中，.sync 是一个修饰符，用于在父组件和子组件之间实现双向数据绑定。通过使用 .sync 修饰符，父组件可以自动接收来自子组件的更新，而不需要手动监听事件。虽然在 Vue 3 中 .sync 仍然可用，但它的使用方式稍有不同。

.sync 的基本用法：

在父组件中使用子组件时，可以在传递 prop 的时候加上 .sync 修饰符。这样，子组件可以通过 $emit 触发一个特定的事件来更新该 prop 的值，父组件会自动接收到这个更新。
示例：
父组件：

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent :message.sync="parentMessage" />
    <!-- 代替了： -->
    <!-- <ChildComponent :message="parentMessage"   @update:message="handleUpdate"/> -->
    <p>Parent Message: {{ parentMessage }}</p>
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';

const parentMessage = ref('Hello from Parent!');
</script>

子组件：

<!-- ChildComponent.vue -->
<template>
  <div>
    <input v-model="localMessage" @input="updateParent" />
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref, watch } from 'vue';

const props = defineProps(['message']);
const emit = defineEmits(['update:message']);

// 创建一个本地的 ref 来处理输入
const localMessage = ref(props.message);

// 监听 props 的变化
watch(() => props.message, (newValue) => {
  localMessage.value = newValue;
});

// 更新父组件的消息
const updateParent = () => {
  emit('update:message', localMessage.value);
};
</script>

在上面的示例中：

• 父组件通过 .sync 修饰符将 parentMessage 传递给子组件。
• 子组件使用 v-model 绑定一个本地变量 localMessage，并在输入时触发 updateParent 方法。
• updateParent 方法通过 emit(‘update:message’, localMessage.value) 向父组件发送事件，更新 parentMessage 的值。
• 父组件会自动接收到这个更新，从而实现了双向数据绑定。

注意事项:

• .sync 修饰符的事件名称遵循 update: 的格式，这意味着如果你要更新 message prop，事件名称应为 update:message。
• 在 Vue 3 中，虽然 .sync 可以使用，但推荐使用 v-model 语法来实现双向绑定，因为它更加简洁和直观。

使用 v-model 替代 .sync:

父组件使用 v-model:

<ChildComponent v-model:message="parentMessage" />

子组件：

const emit = defineEmits(['update:modelValue']);
...
emit('update:modelValue', localMessage.value);