Vue3中Mags组件emit的变量在handleSubmit中未定义始终为null如何解决

问题原因 #

• 变量作用域错误：你在importMags函数内部用let nowMags = selectedMags声明的是函数局部变量，完全没有修改全局定义的响应式nowMags变量，所以全局的nowMags一直保持初始的null值
• 响应式变量声明位置错误：你把nowMags的ref声明直接写在return语句里，setup内部的handleSubmit、importMags函数根本访问不到这个变量
• 依赖版本冲突：代码最后引入的Vue2 CDN和Vue3项目完全不兼容，会导致框架逻辑异常，需要删除

修正后代码 #

<template>
  <form @submit.prevent="handleSubmit">
    <Mags name="magResults" @selectedtags="importMags"> </Mags>
    <q-btn label="Submit" type="submit"  />
  </form>
</template>
<script>
import { ref } from "vue";
// 替换为你实际的Mags组件路径
import Mags from './components/Mags.vue'
export default {
  name: "Name",
  components: { Mags },
  setup() {
    // 在setup内部提前声明响应式变量，内部函数才可正常访问
    const nowMags = ref(null)

    function handleSubmit() {
      // 读取ref类型变量的值需要加.value后缀
      console.log(nowMags.value);
    }

    function importMags(selectedMags) {
      // 给ref类型变量赋值需要加.value后缀
      nowMags.value = selectedMags;
    }
    return {
      importMags,
      handleSubmit,
      nowMags
    };
  },
};
</script>

内容的提问来源于stack exchange，提问作者jdost_26