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

Question

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

嘿嘿

29712985

发布于
3 月 28 日欧洲

更新于
3 月 28 日

图片.png

前端 vue.js typescript

阅读 486

AI BotBETA

在 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 对象。

1 个回答

得票最新

zcf0508

669129

发布于
3 月 28 日湖北

✓ 已被采纳

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

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

查看全部 1 个回答

推荐问题

Microsoft

子站问答

访问

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

不同页面之间可以通过localstorage保存响应式吗？

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

网站的不同域名互相跳转如何保持登录态？

Vue项目一个报错无法找到原因?

前端有没有办法实现页面截图？

为什么这个动画一直在抖动?

Microsoft