vue3弹窗问题?

Question

大佬们,为什么测试环境会报dialogVisible is not defined?

// 页面
<template>
    <button @click="test"></button>
    <changePopup v-model:dialogVisible="dialogVisible" :changeHint="changeHint" @confirm="confirm">
    </changePopup>
</template>
<script setup>
import changePopup from "./components/changePopup.vue"
// 是否弹窗
let dialogVisible = ref(false);
const test = ()=>{
    dialogVisible.value = true
}
</script>


// 组件
<template>
        <el-dialog v-model="dialogVisible" :title="changeHint.title" width="30%" destroy-on-close :show-close="false"
            :close-on-click-modal="false">
            <template #footer>
                <el-button class="closePopup" v-if="changeHint.type == 1" @click="close">关闭</el-button>
            </template>
        </el-dialog>
</template>
const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false
    },
    changeHint: {
        type: Object,
        default: {
            type: '', // 类型  1 不可变更   2 变更费用信息
            title: '', // 标题
            hintData: {} // 提示数据
        }
    }
})
const emits = defineEmits(["update:dialogVisible", "confirm"]);
function close() {
    emits("update:dialogVisible", false);
}

Answer 1

// 页面
<changePopup v-model:dialogVisible="dialogVisible" 
  @updatedialogVisible='updatedialogVisible'  :changeHint="changeHint" @confirm="confirm"></changePopup>

// 是否弹窗
let dialogVisible = ref(false);
cosnt updatedialogVisible=(e)=>{
dialogVisible .value=e
}

// 组件
        <el-dialog v-model="dialogVisible" :title="changeHint.title" width="30%" destroy-on-close :show-close="false"
            :close-on-click-modal="false">
            <template #footer>
                <el-button class="closePopup" v-if="changeHint.type == 1" @click="close">关闭</el-button>
            </template>
        </el-dialog>

const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false
    },
    changeHint: {
        type: Object,
        default: {
            type: '', // 类型  1 不可变更   2 变更费用信息
            title: '', // 标题
            hintData: {} // 提示数据
        }
    }
})
const emits = defineEmits(["updatedialogVisible", "confirm"]);
function close() {
    emits("updatedialogVisible", false);
}

Answer 2

因为你在子组件中使用了变量dialogVisible，但是却没有声明它，子组件中只有props.dialogVisible

Answer 3

父组件使用v-model双向绑定传值，子组件要使用:model-value，不能使用v-model了