vue3-父组件控制子组件弹窗显示watch

父组件：

 HTML部分： 

<Dialog :dialogShow = dialogShow :dialogType = dialogType ></Dialog>

 JS部分：

<script setup>
import { reactive, onMounted } from 'vue'
import Dialog from './dialog.vue'

const dialogShow = ref(false)

// 编辑
const handleEdit = (index, row) => {
  dialogShow.value = true
  dialogType.value = 'edit'
  console.log(index, row)
}
</script>

 JS部分：

子组件： 

HTML部分： 

<el-dialog v-model="dialogFormVisible" :title="dialogType == 'edit' ? '编辑' : '查看'">
</el-dialog>

JS部分： 

<script setup>
import { reactive, ref, onMounted, toRefs, watch } from 'vue'
const props = defineProps({
    dialogShow: {
        type: Boolean,
        default: false,
    },
});
const refProps = toRefs(props)
let dialogFormVisible = ref(props.dialogShow)//本地组件状态
watch(refProps.dialogShow, (val, old) => {
    dialogFormVisible.value = val
}, { deep: true })//监听修改本地
</script>

需要配合监听才能实现！ 

在Vue中，响应式开发是通过Vue的响应式系统实现的。Vue会自动追踪数据的变化，并在数据发生变化时更新相关的视图。而`watch`是Vue提供的一个选项，用于监听数据的变化并执行相应的操作。

使用`watch`的主要原因是，有些操作需要在特定数据发生变化时进行，而不是在每次数据变化时都执行。例如，当某个数据发生变化时，我们可能需要发送一个异步请求、执行一些复杂的计算、更新其他相关的数据等。这些操作可能会比较耗时，如果在每次数据变化时都执行，会导致性能问题。

通过使用`watch`，我们可以精确地监听特定数据的变化，并在变化发生时执行相应的操作。这样可以避免不必要的计算和操作，提高性能。

另外，`watch`还可以监听多个数据的变化，并在它们之间建立关联。这对于处理数据之间的依赖关系非常有用。当被监听的数据发生变化时，我们可以根据需要更新其他相关的数据。

总之，`watch`提供了一种灵活的方式来响应数据的变化，并执行相应的操作。它在处理复杂的业务逻辑和数据依赖时非常有用。但并不是所有的情况都需要使用`watch`，对于简单的数据变化，可以直接在模板中使用插值表达式或计算属性来实现响应式更新。