diff --git a/vue2-tutorials/single-file/demo2/.vs/VSWorkspaceState.json b/vue2-tutorials/single-file/demo2/.vs/VSWorkspaceState.json
deleted file mode 100644
index 7584407..0000000
--- a/vue2-tutorials/single-file/demo2/.vs/VSWorkspaceState.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
- "ExpandedNodes": [
- "",
- "\\src",
- "\\src\\views",
- "\\src\\views\\todo",
- "\\src\\views\\todo\\components"
- ],
- "SelectedNode": "\\src\\views\\todo\\index.vue",
- "PreviewInSolutionExplorer": false
-}
\ No newline at end of file
diff --git a/vue2-tutorials/single-file/demo2/.vs/demo2/FileContentIndex/27bb04e4-112e-4578-a963-9e8f97c6b04a.vsidx b/vue2-tutorials/single-file/demo2/.vs/demo2/FileContentIndex/27bb04e4-112e-4578-a963-9e8f97c6b04a.vsidx
deleted file mode 100644
index cafe4bb..0000000
Binary files a/vue2-tutorials/single-file/demo2/.vs/demo2/FileContentIndex/27bb04e4-112e-4578-a963-9e8f97c6b04a.vsidx and /dev/null differ
diff --git a/vue2-tutorials/single-file/demo2/.vs/demo2/config/applicationhost.config b/vue2-tutorials/single-file/demo2/.vs/demo2/config/applicationhost.config
deleted file mode 100644
index bfb3080..0000000
--- a/vue2-tutorials/single-file/demo2/.vs/demo2/config/applicationhost.config
+++ /dev/null
@@ -1,974 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/vue2-tutorials/single-file/demo2/.vs/demo2/v17/.wsuo b/vue2-tutorials/single-file/demo2/.vs/demo2/v17/.wsuo
deleted file mode 100644
index 2887e15..0000000
Binary files a/vue2-tutorials/single-file/demo2/.vs/demo2/v17/.wsuo and /dev/null differ
diff --git a/vue2-tutorials/single-file/demo2/.vs/demo2/v17/DocumentLayout.backup.json b/vue2-tutorials/single-file/demo2/.vs/demo2/v17/DocumentLayout.backup.json
deleted file mode 100644
index c00c324..0000000
--- a/vue2-tutorials/single-file/demo2/.vs/demo2/v17/DocumentLayout.backup.json
+++ /dev/null
@@ -1,41 +0,0 @@
-{
- "Version": 1,
- "WorkspaceRootPath": "D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\",
- "Documents": [
- {
- "AbsoluteMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\components\\todo-footer.vue||{40D31677-CBC0-4297-A9EF-89D907823A98}",
- "RelativeMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|solutionrelative:src\\views\\todo\\components\\todo-footer.vue||{40D31677-CBC0-4297-A9EF-89D907823A98}"
- }
- ],
- "DocumentGroupContainers": [
- {
- "Orientation": 0,
- "VerticalTabListWidth": 256,
- "DocumentGroups": [
- {
- "DockedWidth": 200,
- "SelectedChildIndex": 1,
- "Children": [
- {
- "$type": "Bookmark",
- "Name": "ST:0:0:{aa2115a1-9712-457b-9047-dbb71ca2cdd2}"
- },
- {
- "$type": "Document",
- "DocumentIndex": 0,
- "Title": "todo-footer.vue",
- "DocumentMoniker": "D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\components\\todo-footer.vue",
- "RelativeDocumentMoniker": "src\\views\\todo\\components\\todo-footer.vue",
- "ToolTip": "D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\components\\todo-footer.vue",
- "RelativeToolTip": "src\\views\\todo\\components\\todo-footer.vue",
- "ViewState": "AgIAAAAAAAAAAAAAAAAAABgAAAACAAAAAAAAAA==",
- "Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.003491|",
- "WhenOpened": "2025-06-21T05:43:06.034Z",
- "EditorCaption": ""
- }
- ]
- }
- ]
- }
- ]
-}
\ No newline at end of file
diff --git a/vue2-tutorials/single-file/demo2/.vs/demo2/v17/DocumentLayout.json b/vue2-tutorials/single-file/demo2/.vs/demo2/v17/DocumentLayout.json
deleted file mode 100644
index 4d38073..0000000
--- a/vue2-tutorials/single-file/demo2/.vs/demo2/v17/DocumentLayout.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
- "Version": 1,
- "WorkspaceRootPath": "D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\",
- "Documents": [
- {
- "AbsoluteMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\index.vue||{40D31677-CBC0-4297-A9EF-89D907823A98}",
- "RelativeMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|solutionrelative:src\\views\\todo\\index.vue||{40D31677-CBC0-4297-A9EF-89D907823A98}"
- },
- {
- "AbsoluteMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\components\\todo-item.vue||{40D31677-CBC0-4297-A9EF-89D907823A98}",
- "RelativeMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|solutionrelative:src\\views\\todo\\components\\todo-item.vue||{40D31677-CBC0-4297-A9EF-89D907823A98}"
- },
- {
- "AbsoluteMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\components\\todo-list.vue||{40D31677-CBC0-4297-A9EF-89D907823A98}",
- "RelativeMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|solutionrelative:src\\views\\todo\\components\\todo-list.vue||{40D31677-CBC0-4297-A9EF-89D907823A98}"
- },
- {
- "AbsoluteMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\components\\todo-footer.vue||{40D31677-CBC0-4297-A9EF-89D907823A98}",
- "RelativeMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|solutionrelative:src\\views\\todo\\components\\todo-footer.vue||{40D31677-CBC0-4297-A9EF-89D907823A98}"
- }
- ],
- "DocumentGroupContainers": [
- {
- "Orientation": 0,
- "VerticalTabListWidth": 256,
- "DocumentGroups": [
- {
- "DockedWidth": 200,
- "SelectedChildIndex": 1,
- "Children": [
- {
- "$type": "Bookmark",
- "Name": "ST:0:0:{aa2115a1-9712-457b-9047-dbb71ca2cdd2}"
- },
- {
- "$type": "Document",
- "DocumentIndex": 0,
- "Title": "index.vue",
- "DocumentMoniker": "D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\index.vue",
- "RelativeDocumentMoniker": "src\\views\\todo\\index.vue",
- "ToolTip": "D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\index.vue*",
- "RelativeToolTip": "src\\views\\todo\\index.vue*",
- "ViewState": "AgIAAAYAAAAAAAAAAAAAACEAAAAJAAAAAAAAAA==",
- "Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.003491|",
- "WhenOpened": "2025-06-21T07:26:33.61Z",
- "EditorCaption": ""
- },
- {
- "$type": "Document",
- "DocumentIndex": 1,
- "Title": "todo-item.vue",
- "DocumentMoniker": "D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\components\\todo-item.vue",
- "RelativeDocumentMoniker": "src\\views\\todo\\components\\todo-item.vue",
- "ToolTip": "D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\components\\todo-item.vue",
- "RelativeToolTip": "src\\views\\todo\\components\\todo-item.vue",
- "ViewState": "AgIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==",
- "Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.003491|",
- "WhenOpened": "2025-06-21T07:26:31.737Z",
- "EditorCaption": ""
- },
- {
- "$type": "Document",
- "DocumentIndex": 2,
- "Title": "todo-list.vue",
- "DocumentMoniker": "D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\components\\todo-list.vue",
- "RelativeDocumentMoniker": "src\\views\\todo\\components\\todo-list.vue",
- "ToolTip": "D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\components\\todo-list.vue",
- "RelativeToolTip": "src\\views\\todo\\components\\todo-list.vue",
- "ViewState": "AgIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==",
- "Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.003491|",
- "WhenOpened": "2025-06-21T07:26:30.713Z",
- "EditorCaption": ""
- },
- {
- "$type": "Document",
- "DocumentIndex": 3,
- "Title": "todo-footer.vue",
- "DocumentMoniker": "D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\components\\todo-footer.vue",
- "RelativeDocumentMoniker": "src\\views\\todo\\components\\todo-footer.vue",
- "ToolTip": "D:\\Project\\Study\\Java\\vue-java-tutorials\\vue2-tutorials\\single-file\\demo2\\src\\views\\todo\\components\\todo-footer.vue",
- "RelativeToolTip": "src\\views\\todo\\components\\todo-footer.vue",
- "ViewState": "AgIAAAAAAAAAAAAAAAAAABIAAAAIAAAAAAAAAA==",
- "Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.003491|",
- "WhenOpened": "2025-06-21T05:43:06.034Z",
- "EditorCaption": ""
- }
- ]
- }
- ]
- }
- ]
-}
\ No newline at end of file
diff --git a/vue2-tutorials/single-file/demo2/.vs/slnx.sqlite b/vue2-tutorials/single-file/demo2/.vs/slnx.sqlite
deleted file mode 100644
index 711ec41..0000000
Binary files a/vue2-tutorials/single-file/demo2/.vs/slnx.sqlite and /dev/null differ
diff --git a/vue2-tutorials/single-file/demo2/src/App.vue b/vue2-tutorials/single-file/demo2/src/App.vue
index 8da91ce..30ccd70 100644
--- a/vue2-tutorials/single-file/demo2/src/App.vue
+++ b/vue2-tutorials/single-file/demo2/src/App.vue
@@ -7,7 +7,8 @@
-->
-
+
+
@@ -17,11 +18,12 @@
// import Demo3 from "@/views/demo3/index.vue";
// import Demo4 from "@/views/demo4/index.vue";
// import Demo5 from "@/views/demo5/index.vue";
-import Todo from "@/views/todo/index.vue";
+// import Todo from "@/views/todo/index.vue";
+import Demo8 from "@/views/demo8/index.vue";
export default {
name: "App",
// components: { Demo1, Demo2, Demo3 },
- components: { Todo },
+ components: { Demo8 },
};
diff --git a/vue2-tutorials/single-file/demo2/src/views/todo/components/todo-footer.vue b/vue2-tutorials/single-file/demo2/src/views/demo7-todo/components/todo-footer.vue
similarity index 100%
rename from vue2-tutorials/single-file/demo2/src/views/todo/components/todo-footer.vue
rename to vue2-tutorials/single-file/demo2/src/views/demo7-todo/components/todo-footer.vue
diff --git a/vue2-tutorials/single-file/demo2/src/views/todo/components/todo-header.vue b/vue2-tutorials/single-file/demo2/src/views/demo7-todo/components/todo-header.vue
similarity index 100%
rename from vue2-tutorials/single-file/demo2/src/views/todo/components/todo-header.vue
rename to vue2-tutorials/single-file/demo2/src/views/demo7-todo/components/todo-header.vue
diff --git a/vue2-tutorials/single-file/demo2/src/views/todo/components/todo-item.vue b/vue2-tutorials/single-file/demo2/src/views/demo7-todo/components/todo-item.vue
similarity index 100%
rename from vue2-tutorials/single-file/demo2/src/views/todo/components/todo-item.vue
rename to vue2-tutorials/single-file/demo2/src/views/demo7-todo/components/todo-item.vue
diff --git a/vue2-tutorials/single-file/demo2/src/views/todo/components/todo-list.vue b/vue2-tutorials/single-file/demo2/src/views/demo7-todo/components/todo-list.vue
similarity index 100%
rename from vue2-tutorials/single-file/demo2/src/views/todo/components/todo-list.vue
rename to vue2-tutorials/single-file/demo2/src/views/demo7-todo/components/todo-list.vue
diff --git a/vue2-tutorials/single-file/demo2/src/views/todo/index.vue b/vue2-tutorials/single-file/demo2/src/views/demo7-todo/index.vue
similarity index 100%
rename from vue2-tutorials/single-file/demo2/src/views/todo/index.vue
rename to vue2-tutorials/single-file/demo2/src/views/demo7-todo/index.vue
diff --git a/vue2-tutorials/single-file/demo2/src/views/demo8/Vue2 组件通信与事件处理最佳实践.md b/vue2-tutorials/single-file/demo2/src/views/demo8/Vue2 组件通信与事件处理最佳实践.md
new file mode 100644
index 0000000..43c37a9
--- /dev/null
+++ b/vue2-tutorials/single-file/demo2/src/views/demo8/Vue2 组件通信与事件处理最佳实践.md
@@ -0,0 +1,174 @@
+# Vue2 组件通信与事件处理最佳实践
+
+## 一、事件系统核心机制
+
+### 1. 事件修饰符对比
+| 修饰符 | 说明 | 示例 |
+| ---------- | ------------ | --------------------------- |
+| `.once` | 只触发一次 | `@click.once="handler"` |
+| `.native` | 监听原生事件 | `@click.native="handler"` |
+| `.stop` | 阻止事件冒泡 | `@click.stop="handler"` |
+| `.prevent` | 阻止默认行为 | `@submit.prevent="handler"` |
+
+### 2. 事件绑定与解绑
+```javascript
+// 子组件 StudentInfo.vue
+methods: {
+ emitEvent() {
+ this.$emit('custom-event', payload)
+ },
+ unbind() {
+ this.$off('custom-event') // 解绑特定事件
+ this.$off() // 解绑所有事件
+ }
+}
+```
+
+## 二、组件通信模式详解
+
+### 1. Props 向下传递
+```javascript
+// 父组件
+
+
+// 子组件
+props: {
+ title: {
+ type: String,
+ default: '默认标题'
+ }
+}
+```
+
+### 2. Events 向上通信
+```javascript
+// 子组件
+this.$emit('update', newValue)
+
+// 父组件
+
+```
+
+### 3. 高级通信方式
+| 方式 | 适用场景 | 示例 |
+| -------------- | ---------- | ------------------------------------- |
+| ref | 父调子方法 | `this.$refs.child.method()` |
+| provide/inject | 跨级组件 | `provide() { return { key: value } }` |
+| Event Bus | 任意组件 | `Vue.prototype.$bus = new Vue()` |
+| Vuex | 全局状态 | `this.$store.commit('mutation')` |
+
+## 三、最佳实践指南
+
+### 1. 事件命名规范
+- 使用 kebab-case 命名（如 `user-updated`）
+- 避免与原生事件重名（如 `click`）
+- 语义化命名（如 `form-submitted`）
+
+### 2. 性能优化建议
+```javascript
+// 1. 适时解绑事件
+beforeDestroy() {
+ this.$off('custom-event')
+}
+
+// 2. 防抖处理高频事件
+methods: {
+ handleInput: _.debounce(function() {
+ // 处理逻辑
+ }, 500)
+}
+```
+
+### 3. 安全通信模式
+```javascript
+// 添加事件存在性检查
+if (this._events['custom-event']) {
+ this.$emit('custom-event', data)
+}
+```
+
+## 四、高级应用场景
+
+### 1. 动态事件处理
+```javascript
+// 根据条件绑定不同处理函数
+
+
+
+
+
+```
+
+### 2. 自定义事件总线
+```javascript
+// event-bus.js
+import Vue from 'vue'
+export const EventBus = new Vue()
+
+// 组件A
+EventBus.$emit('message', 'Hello')
+
+// 组件B
+EventBus.$on('message', (msg) => {
+ console.log(msg)
+})
+```
+
+### 3. 异步事件处理
+```javascript
+// 返回Promise的事件处理
+methods: {
+ async submitForm() {
+ try {
+ await this.$emitAsync('form-submit')
+ this.showSuccess()
+ } catch (error) {
+ this.showError(error)
+ }
+ }
+}
+```
+
+## 五、常见问题解决方案
+
+1. **事件未触发排查**：
+ - 检查事件名称大小写是否一致
+ - 确认子组件是否正确调用 `$emit`
+ - 验证父组件监听的事件名是否匹配
+
+2. **内存泄漏预防**：
+ ```javascript
+ // 清除所有监听器
+ beforeDestroy() {
+ this.$off()
+ EventBus.$off('event', this.handler)
+ }
+ ```
+
+3. **跨组件通信优化**：
+ ```javascript
+ // 使用Vue.observable实现轻量状态管理
+ const state = Vue.observable({ count: 0 })
+ ```
+
+## 六、与Vue3的对比
+
+| 特性 | Vue2 | Vue3 |
+| -------- | ----------- | ---------------- |
+| 事件系统 | `$emit/$on` | `emits` 选项声明 |
+| 移除API | - | `$off`, `$once` |
+| 新特性 | - | `v-model` 参数 |
+| 性能 | 基于观察者 | 基于Proxy |
+
diff --git a/vue2-tutorials/single-file/demo2/src/views/demo8/components/Sutdent.vue b/vue2-tutorials/single-file/demo2/src/views/demo8/components/Sutdent.vue
new file mode 100644
index 0000000..1b8ce41
--- /dev/null
+++ b/vue2-tutorials/single-file/demo2/src/views/demo8/components/Sutdent.vue
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+