modified to use emit to pass value from child template Sidebar.vue to parent template App.vue

src/App.vue

@@ -7,30 +7,42 @@ import tutorial_1_composition from './components/Tutorial-1-composition.vue';
 import tutorial_2_composition from './components/Tutorial-2-composition.vue';
 import tutorial_3_composition from './components/Tutorial-3-composition.vue';
 import sidebar from './components/Sidebar.vue';
-import { store } from './components/Store.js';
-import { menuList } from './components/Store.js';
+import {ref} from "vue"
+import {reactive} from "vue"
 
-const componentMap = {
+const selectedMenuId = ref(0)
+const menuList = reactive([])
+
+const components = {
     tutorial_1_options,
     tutorial_1_composition,
     tutorial_2_composition,
     tutorial_3_composition
 };
 
+function selectMenuCallback(menuId) {
+    selectedMenuId.value = menuId
+}
+
+function initMenuListCallback(fromMenuList) {
+    // 从子模板中接收menu list，赋值给父模板
+    Object.assign(menuList, fromMenuList)
+}
+
 </script>
 
 <template>
     <!--<TheWelcome />-->
     <div class="container">
         <div class="sidebar">
-            <sidebar/>
+            <sidebar @initMenuList="initMenuListCallback" @selectMenu="selectMenuCallback"></sidebar>
         </div>
         <div class="main-content">
             <!-- 主要内容区域 -->
             <div v-for="menu in menuList" :index="menu.id" :key="menu.id">
-                <!--动态渲染组件-->
-                <div v-if="menu.id === store.currentId || store.currentId === 0"> <!--选择的是All，或者选择的是当前项-->
-                    <component v-if="menu.id != 0" :is="componentMap[menu.elementName]"></component>
+                <!-- 动态渲染组件 -->
+                <div v-if="menu.id === selectedMenuId || selectedMenuId === 0">  <!-- 选择的是All，或者选择的是当前项 -->
+                    <component v-if="menu.id != 0" :is="components[menu.elementName]"></component>
                 </div>
             </div>
         </div>

src/components/Sidebar.vue

@@ -2,14 +2,13 @@
 <template>
     <div class="sidebar">
         <el-menu
-            :default-active="0"
             class="el-menu-vertical-demo"
             @select="handleSelect">
             <el-menu-item
                 v-for="menu in menuList"
                 :index="String(menu.id)"
                 :key="menu.id"
-                :class="{ 'selected': menu.id == store.currentId }">
+                :class="{ 'selected': menu.id == selectedMenuId }">
                 <i class="el-icon-menu"></i>{{ menu.name }}
             </el-menu-item>
         </el-menu>
@@ -17,17 +16,83 @@
 </template>
 
 
-<script setup>
-import { store } from './Store.js';
-import { menuList } from './Store.js';
+<script>
+import {ref} from "vue"
+import {reactive} from "vue"
+import {onMounted} from "vue"
 
-const handleSelect = (key, keyPath) => {
-    store.currentId = Number(key);
-    console.log("keyPath = " + keyPath)
+export default {
+
+    // 固定名称的函数，在生命周期钩子中自动执行
+    setup(_, {emit}) {
+
+        // 定义变量
+        // 被选中的menu id
+        const selectedMenuId = ref(0)
+        // Menu清单
+        const menuList = reactive([
+            {
+                id: 0,
+                name: "All",
+                elementName: "All"
+            },
+            {
+                id: 1,
+                name: "Tutorial-1-options",
+                elementName: "tutorial_1_options"
+            },
+            {
+                id: 2,
+                name: "Tutorial-1-composition",
+                elementName: "tutorial_1_composition"
+            },
+            {
+                id: 3,
+                name: "Tutorial-2-composition",
+                elementName: "tutorial_2_composition"
+            },
+            {
+                id: 4,
+                name: "Tutorial-3-composition",
+                elementName: "tutorial_3_composition"
+            }
+        ])
+        // 定义计算属性
+
+        // 定义函数
+        function handleSelect(key, keyPath){
+            selectedMenuId.value = Number(key);
+            // console.log("keyPath = " + keyPath)
             // 这里可以根据需要添加逻辑来处理页面切换
-};
-</script>
+            // 通过emit触发父模板的函数
+            emit("selectMenu", selectedMenuId.value)
+        }
+
+        // On Mounted
+        onMounted(() => {
+            // alert("onMounted")
+            // 复制一份数组，避免直接修改响应式数据
+            const newMenuList = menuList.slice(); // 复制一份数组，避免直接修改响应式数据
+            // 将menuList传递给父组件
+            emit("initMenuList", newMenuList)
+        })
+
+        return {
 
+            // 变量
+            selectedMenuId,
+            menuList,
+            // 计算属性
+            // 函数
+            handleSelect
+        }
+
+    }
+
+}
+
+
+</script>
 
 <style scoped>
 /* 添加这个样式规则来定义选中时的背景颜色 */

src/components/Tutorial-1-composition.vue

@@ -2,9 +2,9 @@
     <hr style="height: 30px;
     border: 0;
     box-shadow: inset 0 30px 30px -30px darkblue;">
-    <H1>
+    <h1>
         Tutorial-1-composition
-    </H1>
+    </h1>
     <br>
     <hr>
     <!-- 文本插值演示({{ variable }}) -->

src/components/Tutorial-1-options.vue

@@ -2,9 +2,9 @@
     <hr style="height: 30px;
     border: 0;
     box-shadow: inset 0 30px 30px -30px darkblue;">
-    <H1>
+    <h1>
         Tutorial-1-options
-    </H1>
+    </h1>
     <br>
     <hr>
     <!-- 文本插值演示({{ variable }}) -->

src/components/Tutorial-2-composition.vue

@@ -2,9 +2,9 @@
     <hr style="height: 30px;
     border: 0;
     box-shadow: inset 0 30px 30px -30px darkblue;">
-    <H1>
+    <h1>
         Tutorial-2-composition
-    </H1>
+    </h1>
     <br>
     <hr>
     <!-- 计算属性 -->

src/components/Tutorial-3-composition.vue

@@ -2,9 +2,9 @@
     <hr style="height: 30px;
     border: 0;
     box-shadow: inset 0 30px 30px -30px darkblue;">
-    <H1>
+    <h1>
         Tutorial-3-composition
-    </H1>
+    </h1>
     <br>
     <hr>
     <!-- 内联事件处理器 -->
@@ -33,7 +33,7 @@
     <h3>
         <span>按键修饰符</span>
     </h3>
-    <input id="input1" @keyup.enter="handleEnter" placeholder="按回车捕获键盘事件"/>
+    <input id="inputKeyboard" @keyup.enter="handleEnter" placeholder="按回车捕获键盘事件"/>
     <br>
     <hr>
     <!-- 表单输入绑定 -->
@@ -105,8 +105,7 @@ export default {
         const textLazy = ref("表单输入绑定文字.lazy")
         const checked = ref(false)
         const picked = ref("None")
-        const selected = ref("selected")
-        selected.value = ""
+        const selected = ref([])
         // 定义计算属性
         // 定义函数
         function greet(event) {
@@ -123,7 +122,7 @@ export default {
         }
 
         function handleEnter() {
-            document.getElementById("input1").value = "Enter pressed!"
+            document.getElementById("inputKeyboard").value = "Enter pressed!"
         }
 
         // 返回变量和函数，暴露给模板使用