vue setup 关于子传父动态获取值?

Question

我用vue 组合式API 写后台框架，用element plus来完成。
但是怎么实现动态子传父获取值？ （只要header.vue点击后，nva.vue动态获取）。

我做了个header.vue和nva.vue两个文件。
header.vue是按钮切换，nva.vue是菜单回收。

header.vue代码：

<div @click="menu">切换</div>

const isCollapse.value =ref(null)
menu=（）=>{
    if(id === "open"){
        isCollapse.value = false;
    }else{
        isCollapse.value = true;
    }
}

nva.vue代码：

 <el-menu
      default-active="2"
      :collapse="isCollapse"
      collapse-transition
      unique-opened
      router
    >
.....
 </el-sub-menu>

//导航收缩值是false true
const isCollapse = ref(如何获取header.vue值传这里)；


但是怎么写header.vue 动态 传来值 ？ 

用defineEmits方法也不行。
这变化是静态的。
只要子触发父就动态获取变化。

Answer 1

我就在这写子传父吧，下面的也不改了。

<div @click="menu">切换</div>

const emit = defineEmits(['switch'])
let isCollapse = false;
menu =()=>{
   isCollapse = !isCollapse;
    emit("switch",isCollapse)
}

//这是父组件引入子组件的地方
<child @switch=“parentSwitch”></child>

 <el-menu
      default-active="2"
      :collapse="isCollapse"
      collapse-transition
      unique-opened
      router
    >
.....
 </el-sub-menu>

const isCollapse = ref(true)；
//headvalue 是子组件传过来的值。
const parentSwitch = ( headvalue )=>{
    isCollapse.value = headvalue 
}

下面这个是父传子。。。。。

<div @click="menu">切换</div>

//子组件
<child :isCollapse="isCollapse"></child>

const isCollapse.value =ref(null)
menu=（）=>{
    if(id === "open"){
        isCollapse.value = false;
    }else{
        isCollapse.value = true;
    }
}

子组件

 <el-menu
      default-active="2"
      :collapse="props.isCollapse"
      collapse-transition
      unique-opened
      router
    >
.....
 </el-sub-menu>

const props = defineProps(['isCollapse'])

你的方法还可以简化，
你这id 是什么啊，自己定义的就直接不要了

const isCollapse =ref(true)
menu=（）=>{
        isCollapse.value = !isCollapse.value;
}

Answer 2

如果真的不行的话用EventBus吧，虽然Vue3 EventBus实现起来要通过第三方了，但是还是可以用的

https://v3-migration.vuejs.org/breaking-changes/events-api.html