用vue编写一个创建3个组件名称分别是Parent _学号后两位vue, GlobChilren_学号后

在 Vue.js 中，创建三个组件分别叫做 "Parent_学号后两位.vue"、"GlobalChildren_学号后两位.vue" 的步骤会涉及文件结构组织和组件设计。首先，你需要在项目目录下创建对应的文件夹并定义每个组件。

1. **Parent_学号后两位.vue**:
这个组件通常是一个父组件，用于包含其他两个组件，并处理数据传递。例如：

   <template>
     <div>
       <h1>Parent Component</h1>
       <!-- 使用 slot 来插入 GlobalChildren 和 Child 组件 -->
       <slot name="global-child"></slot>
       <Child :studentNumber="studentNumber" />
     </div>
   </template>

   <script>
   export default {
     components: {
       // 先假设我们还没有这个组件
       Child: () => import('./Child.vue'),
     },
     data() {
       return {
         studentNumber: this.$route.params.studentNumber,
       };
     },
   };
   </script>

2. **GlobalChildren_学号后两位.vue**:
这个组件可能是全局可用的一个复用组件，不需要特定关联到某个父组件：

   <template>
     <button @click="$emit('global-child-rendered')">Render Me ({{ studentNumber }})</button>
   </template>

   <script>
   export default {
     props: {
       studentNumber: String,
     },
   };
   </script>

3. **Child_学号后两位.vue**:
这个组件是子组件，它可能有自己的状态和行为：

   <template>
     <p>Your child component with student number: {{ studentNumber }}</p>
   </template>

   <script>
   export default {
     props: ['studentNumber'],
   };
   </script>

在父组件中，你可以通过 `v-slot` 或者动态导入 `Child` 组件来使用它们。注意，`$route.params.studentNumber` 需要在路由配置中设置，这里仅作为示例。