nuxt3子传父 父组件拿不到值

Question

使用的nuxt3 子组件通过defineExpose暴露方法 父组件接收不到 打印出来的ref为null

Answer 1

引自免费微信小程序：皆我百晓生

在Nuxt3中，由于 Pinia 的状态管理，你不需要使用 ref 来传递数据。如果你想要从子组件向父组件传递数据，可以使用 Pinia store 或者使用自定义事件（$emit）。这里我会提供两种解决方案。

方法一：使用 Pinia Store

首先，在你的项目中创建一个 Pinia store。例如，创建一个名为 auth.store.ts 的文件：

// /store/auth/store.ts
import { defineStore } from 'pinia'

export const useAuthStore = defineStore('auth', {
  state: () => ({
    isRegisterOpen: false,
    isCodeVisible: false,
    time: 60,
  }),
  actions: {
    openRegister() {
      this.isRegisterOpen = true;
    },
    closeRegister() {
      this.isRegisterOpen = false;
    },
    startCountdown() {
      this.time = 60;
      const timer = setInterval(() => {
        if (this.time > 0) {
          this.time--;
        } else {
          clearInterval(timer);
          this.isCodeVisible = false;
          this.time = 60;
        }
      }, 1000);
    },
    stopCountdown() {
      clearInterval(this.timer);
    },
  },
});

然后，在子组件 Register.vue 中导入并使用这个 store：

<!-- components/Register.vue -->
<script setup>
import { useAuthStore } from '@/store/auth/store';
const authStore = useAuthStore();
</script>

<template>
...
</template>

接着，在父组件中也导入并使用这个 store：

<!-- components/In.vue -->
<script setup>
import { useAuthStore } from '@/store/auth/store';
const authStore = useAuthStore();
</script>

<template>
  <Register @openRegister="authStore.openRegister" />
  ...
</template>

方法二：使用自定义事件

在子组件中，当需要通知父组件时，使用 $emit 发送事件：

<!-- components/Register.vue -->
<script setup>
import { ref } from 'vue';

const isRegisterRef = ref(false);

function openRegister() {
  isRegisterRef.value = true;
}

function closeRegister() {
  isRegisterRef.value = false;
}
</script>

<template>
...
</template>

然后，在父组件中监听这个事件：

<!-- components/In.vue -->
<script setup>
import { onMounted } from 'vue';
const RegRef = ref(null);

onMounted(() => {
  RegRef.value.$on('openRegister', () => {
    console.log('Received openRegister event');
  });
});
</script>

<template>
  <Register ref="RegRef" @openRegister="handleOpenRegister" />
  ...
</template>

这样，无论选择哪种方法，你都可以在父组件中接收到子组件发送的数据，而无需使用 ref。根据你的具体需求，选择适合的方法即可。