前端 - vue+ts中父组件通过点击事件传过来的值子组件却收不到，什么问题？

Question

Answer 1

在你写的代码中，子组件的 props.dialogVisble 在组件创建的时候就固化下来了，你如果需要监听传入的 props 的变化，应该 watch 变化

watch(() => props.dialogVisble, () => {    console.log(props.dialogVisble)})

Answer 2

在 Vue 3 和 TypeScript 中，ref 函数被用来创建一个响应式引用。ref 函数返回的是一个包装对象，这个对象有一个 value 属性，用于访问或修改其内部的值。

在你的代码中，dialogVisible 是一个 ref 对象，而不是一个布尔值。因此，当你尝试打印 dialogVisible 时，你实际上打印的是这个 ref 对象，而不是它的 value 属性。这就是为什么你看到 dialogVisible 的值嵌套在 dialogVisible.value 下面的原因。

在你的 detailShow 函数中，你应该修改 dialogVisible.value，而不是 dialogVisible，因为 dialogVisible 是一个响应式引用，你需要通过 value 属性来访问或修改它的值。

另外，在你的 defineProps 中，你定义了一个 dialogVisible 属性，它的类型是 Boolean，而不是 ref<Boolean>。因此，在 fatherElement 中，dialogVisible 是一个布尔值，而不是一个 ref 对象。这就是为什么你在 fatherElement 中看到的 dialogVisible 值没有嵌套的原因。

如果你想让父组件传递一个响应式引用给子组件，你可以在父组件中使用 toRefs 函数将 ref 对象转换为普通的响应式对象，然后在子组件中使用 defineProps 来接收这个响应式对象。例如：

父组件：

import { reactive, toRefs } from 'vue';export default {  setup() {    const state = reactive({      dialogVisible: false,    });    const detailShow = () => {      state.dialogVisible = true;      console.log("11111111111", state.dialogVisible);    };    return {      ...toRefs(state),      detailShow,    };  },};

子组件：

import { defineProps } from 'vue';export default {  props: defineProps<{    dialogVisible: boolean;  }>(),  setup(props) {    console.log("222222222222", props.dialogVisible);  },};

这样，dialogVisible 就是一个响应式布尔值，而不是一个 ref 对象。