vue3兄弟之间的传值方法（菜单折叠问题）

最新推荐文章于 2024-03-25 15:15:53 发布

郭靖8

最新推荐文章于 2024-03-25 15:15:53 发布

阅读量194

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_69892545/article/details/131787833

版权

1.子组件A页面

<template>
  <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
    <button @click="toggleCollapse()">开关</button>
  </el-radio-group>
</template>

<script setup lang="ts">
import { ref } from "vue";

const emits = defineEmits(["parentCli"]);
const isCollapse = ref(false);

const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value;
  console.log("isCollapse", isCollapse.value);

  emits("parentCli", isCollapse.value); // 使用方式和 wue2 this.$emit 一样
};

//yufatan
</script>

<style>
</style>

定义了一个名为`emits`的变量，并使用`defineEmits`方法创建了一个可供组件使用的自定义事件`parentCli`。

然后，代码创建了一个名为`isCollapse`的响应式变量，并将其初始值设置为`false`。该变量用于表示一个折叠状态，即是否处于折叠状态。

之后，代码定义了一个名为`toggleCollapse`的函数。这个函数的作用是切换`isCollapse`的值，将其设置为相反的布尔值。然后，在控制台中输出`isCollapse`的值。

最后，代码通过调用`emits`方法，触发了名为`parentCli`的自定义事件，并传递了`isCollapse`的值作为参数

2.A和B的公共父组件

<template>
  <div class="common-layout">
    <el-container>
      <el-aside :width="isCollapse ?'64px':'250px'">
        <Menu :isCollapse="isCollapse"></Menu>
      </el-aside>
      <el-container>
        <el-header>
          <Head @parentCli="parentCli"></Head>
        </el-header>
        <el-main>
          <main></main>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import Menu from "./menu/index.vue";
import Head from "./head/index.vue";
import Main from "./main/index.vue";
import { ref } from "vue";
const isCollapse = ref(false);

const parentCli = (isCollapseValue: boolean) => {
  isCollapse.value = isCollapseValue;
  console.log("isCollapse22", isCollapse.value);
};

这段代码使用 Vue.js 的 ref 函数创建了一个响应式的变量 isCollapse，然后定义了一个函数 parentCli 用于更新 isCollapse 的值，并在控制台打印出来。

B组件页面

<template>
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
  >
    <el-sub-menu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>Navigator One{{ isCollapse }}</span>
      </template>
      <el-menu-item-group>
        <template #title><span>Group One</span></template>
        <el-menu-item index="1-1">item one</el-menu-item>
        <el-menu-item index="1-2">item two</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="Group Two">
        <el-menu-item index="1-3">item three</el-menu-item>
      </el-menu-item-group>
      <el-sub-menu index="1-4">
        <template #title><span>item four</span></template>
        <el-menu-item index="1-4-1">item one</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="2">
      <el-icon><icon-menu /></el-icon>
      <template #title>Navigator Two</template>
    </el-menu-item>
    <el-menu-item index="3" disabled>
      <el-icon><document /></el-icon>
      <template #title>Navigator Three</template>
    </el-menu-item>
    <el-menu-item index="4">
      <el-icon><setting /></el-icon>
      <template #title>Navigator Four</template>
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref } from "vue";
// import { defineEmits} from "vue";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";

type Props = {
  isCollapse: boolean;
};
defineProps<Props>();
// const props = defineProps(['receivedData']);

// const isCollapse = ref(true);
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 250px;
  min-height: 100vw;
}
.el-menu--collapse {
  height: 100vh;
}
</style>

此代码也同时处理了菜单折叠问题：动画卡顿，菜单高度，菜单背景不变等问题

郭靖8

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue3兄弟之间的传值方法（菜单折叠问题）

1.子组件A页面定义了一个名为的变量，并使用方法创建了一个可供组件使用的自定义事件。然后，代码创建了一个名为的响应式变量，并将其初始值设置为。该变量用于表示一个折叠状态，即是否处于折叠状态。之后，代码定义了一个名为的函数。这个函数的作用是切换的值，将其设置为相反的布尔值。然后，在控制台中输出的值。最后，代码通过调用方法，触发了名为的自定义事件，并传递了的值作为参数2.A和B的公共父组件这段代码使用 Vue.js 的函数创建了一个响应式的变量，然后定义了一个函数用于更新
复制链接

扫一扫