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

作者站长头像
站长
· 阅读数 4

我用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方法也不行。 这变化是静态的。只要子触发父就动态获取变化。

回复
1个回答
avatar
test
2024-07-08

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

<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;
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容