vue3父组件向子组件传值的问题？

Question

代码如下：

<button @click="handleButton">按钮</button>
<el-dialog v-model="flag">
  <button @click="handleButton2">按钮1</button>
  <HelloWorld @sendResult="sendResult" :dialogFlag="dialogFlag"
/></el-dialog>

const handleButton = () => {
  flag.value = true;
};
const handleButton2 = () => {
  dialogFlag.value = true;
};

这是父组件的代码，

这是子组件的代码：

import { ref, defineProps } from "vue";
const props = defineProps({
  dialogFlag: {
    type: Boolean,
  },
});
let dialogFlag = ref(props.dialogFlag);

这是子组件的结构代码

<el-dialog title="选择地址" width="70%" v-model="dialogFlag"></el-dialog>

刷新页面就报

这样的错

由于父组件点击触发是一个弹框，弹框里面有按钮点击按钮也是一个弹框，就是嵌套弹框

期望刷新的时候不是报上面的截图，修改了后顺畅的功能，

Answer 1

看起来不像是 dialogFlag 传值的问题，可能是因为你在弹窗子组件的初始化相关业务代码里面处理一些其他的业务代码，和 dialogFlag 没什么关系。
大概是定位在你的 HellowWorld.vue 文件的 47 行 和 69 行。看看是否有其他的业务代码经行了初始化，比如说地图组件之类的。确保在弹窗组件渲染之后或者再去操作。

Answer 2

如楼上所说，你的代码不会报这个问题。但是你的代码父组件传入的dialogFlag在子组件是不会响应的，你父组件的dialogFlag变成true后子组件的dialogFlag还是false，所以你第二个弹窗这样是打不开的，子组件js要改成这样

import { ref, defineProps, watch } from "vue";
const props = defineProps({
  dialogFlag: {
    type: Boolean,
  },
});
const dialogFlag = ref(false)
watch(
  () => props.dialogFlag,
  newVal => dialogFlag.value = props.dialogFlag
)