Vue 3 父子组件通信语法糖 .sync 实现

父组件：

<template>
  <nav>导航栏</nav>
  <main>
    <a-button type="primary" @click="visible = true">父组件</a-button>
    <ImgList />
  </main>
  <child-modal v-model:visible="visible"></child-modal>
</template>

<script>
import ImgList from './components/ImgList.vue'
import { Button } from 'ant-design-vue'

export default {
  name: 'App',
  components: {
    ImgList,
    AButton: Button,
  },
  data() {
    return {}
  },
}
</script>

<script setup>
import { ref, getCurrentInstance } from 'vue'
const { proxy, ctx } = getCurrentInstance()
import ChildModal from './components/modal.vue'
const visible = ref(false)

const msg = ref('success')
setTimeout(() => {
  proxy.$message.success(msg.value)
  console.log(proxy, ctx)
}, 1000)
</script>

子组件：

<template>
  <a-modal v-model:visible="show" title="Basic Modal" @ok="handleOk">
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </a-modal>
</template>

<script setup>
import { computed, defineProps, defineEmits} from 'vue'
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
})
const $emit = defineEmits(['update:visible'])
const show = computed({
  get() {
    return props.visible
  },
  set(v) {
    $emit('update:visible', v)
  },
})
const handleOk = e => {
  console.log(e)
  show.value = false
}
</script>