Vue3 实现根据左侧树实现右侧不同页面的完整 demo

这里提供一个简单的 Vue3 实现根据左侧树实现右侧不同页面的完整 demo。

首先，我们需要准备一个简单的数据源，用于渲染左侧的树形菜单和右侧的不同页面。以下是一个简单的数据源示例：

const data = [
  {
    id: 1,
    label: '页面1',
    children: [
      {
        id: 2,
        label: '子页面1'
      },
      {
        id: 3,
        label: '子页面2'
      }
    ]
  },
  {
    id: 4,
    label: '页面2',
    children: [
      {
        id: 5,
        label: '子页面3'
      },
      {
        id: 6,
        label: '子页面4'
      }
    ]
  }
];

在 Vue3 中，我们可以使用`<template>`, `<script>` 和 `<style>` 标签来编写我们的组件。以下是一个简单的示例组件代码：

<template>
  <div>
    <div class="menu">
      <ul>
        <li v-for="item in data" :key="item.id" @click="selectItem(item)">
          {{ item.label }}
          <ul v-if="item.children">
            <li v-for="child in item.children" :key="child.id" @click="selectChild(child)">
              {{ child.label }}
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="content">{{ selectedChild ? selectedChild.label : '请选择一个页面' }}</div>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      data: [
        {
          id: 1,
          label: '页面1',
          children: [
            {
              id: 2,
              label: '子页面1'
            },
            {
              id: 3,
              label: '子页面2'
            }
          ]
        },
        {
          id: 4,
          label: '页面2',
          children: [
            {
              id: 5,
              label: '子页面3'
            },
            {
              id: 6,
              label: '子页面4'
            }
          ]
        }
      ],
      selectedChild: null
    });

    const selectItem = (item) => {
      state.selectedChild = null;
    };

    const selectChild = (child) => {
      state.selectedChild = child;
    };

    return {
      data: state.data,
      selectedChild: state.selectedChild,
      selectItem,
      selectChild
    };
  }
};
</script>

<style>
.menu {
  float: left;
  width: 30%;
}

.content {
  float: left;
  width: 70%;
  height: 300px;
  border: 1px solid #ccc;
}
</style>

在上面的示例代码中，我们使用了 Vue3 的响应式 API `reactive` 来创建了一个名为 `state` 的响应式对象，其中包含了我们的数据源和当前选中的子页面。在`selectItem` 和 `selectChild` 方法中，我们通过修改 `state.selectedChild` 的值来更新当前选中的子页面。最后，我们将 `data`、`selectedChild` 和 `selectItem`、`selectChild` 方法都暴露出去，以便在模板中使用。

最后，我们需要将这个示例组件引入到我们的应用程序中，并将其渲染到页面中。以下是一个简单的入口文件示例：

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

以上就是一个简单的 Vue3 实现根据左侧树实现右侧不同页面的完整 demo。当我们点击左侧的菜单项和子菜单项时，右侧的内容会随之改变，以显示不同的页面。