visible.sync在vue3的写法

`visible.sync` 是 Vue3 中 `v-model` 的一个特殊用法，用于实现父子组件之间数据的双向绑定和状态的同步。通常用于处理 `v-if` 和 `v-show` 这样的条件渲染，使得当父组件中的某个值变化时，子组件的状态也相应地改变，并保持视图更新。

在 Vue3 中，`visible.sync` 是使用自定义事件 `@update:visible` 或 `@visible-change` 实现的。假设你有一个名为 `ChildComponent` 的子组件，它期望与父组件共享 `visible` 的状态：

<template>
  <div v-if="$parent.$sync('visible', visible)">子组件内容</div>
</template>

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

// 在子组件中定义一个响应式变量
const visible = ref(false);

// 接收并响应父组件的可见状态更新
onMounted(() => {
  // 使用 `setup` 中的 `setupContext` 或者 `provide`/`inject` 方法与父组件通信
  const sync = provide('visible') || inject('visible');
  sync.value = visible;
});
</script>

在父组件中，你可以这样设置：

<template>
  <ChildComponent :visible.sync="parentVisible" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentVisible: false, // 父组件的可见状态
    };
  },
};
</script>