<el-button type="default" @click="testShow = true"> 打开测试</el-button>
<Test :testShow="testShow" @closePopper="() => (testShow = false)"></Test>
<script setup>
import Test from './components/test.vue'
const testShow = ref(false)
<script/>
// ***************************使用 组件**************************
<template>
<div class="">
<el-dialog v-model="testShow" title="Tips" width="30%" @close="closeClick()">
<span>This is a message</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="dialogVisible = false"> Confirm </el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref } from 'vue'
const props = defineProps({
testShow: {
type: Boolean,
required: true
}
})
const emit = defineEmits(['closePopper'])
const closeClick = () => {
emit('closePopper', false)
}
</script>
<style scoped></style>
vue3dialog弹窗 父子传值
于 2023-03-09 20:00:34 首次发布