父组件：
<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>
