父组件
这种写法父组件的自定义事件
<template>
<TestProps v-model:dialogVisible="visible" />
<button @click="visible = true">show</button>
</template>
<script setup>
import { ref } from 'vue'
import TestProps from './components/TestProps.vue'
const visible = ref(false)
</script>
子组件
借助计算属性的gettter setter 写法; 子组件的v-model不能直接绑定props
<template>
<el-dialog v-model="visible" title="Tips" width="30%">
<span>这是子组件</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="emit('update:dialogVisible', false)">Cancel</el-button>
<el-button type="primary" @click="emit('update:dialogVisible', false)"> Confirm </el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
const props = defineProps<{ dialogVisible: boolean }>()
const emit = defineEmits(['update:dialogVisible'])
const visible = computed({
get() {
return props.dialogVisible
},
set(v) {
emit('update:dialogVisible', v)
},
})
</script>
before-close 属性
点击右上角的关闭X,或者单击遮罩才触发这个事件, 所以意义何在?
function handleClose(done) {
// return false
return null || undefined || '' || false || NaN || 0 // false 的值不关闭弹窗 done()关闭
}
@close 这个才是在关闭的时候都触发的
下面四种情况能都触发
- visible: false
- 点击 X
- 点击遮罩
- 键盘Esc 按键
@open @close
- open的时候做一些初始化操作, 比如设置标题, 是否调用接口获取数据
- close 的时候做一些收尾工作: 比如resetFields