-
+
- + {{ y.name }} + +
-
+
- + {{ item.name }} + +
-
+
+
-
-
+
\ No newline at end of file
diff --git a/学习VUE/hello_vue3/src/pages/01_props/Child.vue b/学习VUE/hello_vue3/src/pages/01_props/Child.vue
new file mode 100644
index 0000000..83415a8
--- /dev/null
+++ b/学习VUE/hello_vue3/src/pages/01_props/Child.vue
@@ -0,0 +1,25 @@
+
+ + Vue3 组件间通信 +
++
+
+
+ 1. props
+ 2. 自定义事件
+ 3. mitt
+ 4. v-model
+ 5. $attrs
+ 6. $refs、$parent
+ 7. provide、inject
+ 8. pinia
+ 9. slot
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/学习VUE/hello_vue3/src/pages/01_props/Father.vue b/学习VUE/hello_vue3/src/pages/01_props/Father.vue
new file mode 100644
index 0000000..e457614
--- /dev/null
+++ b/学习VUE/hello_vue3/src/pages/01_props/Father.vue
@@ -0,0 +1,28 @@
+
+ 子组件
+玩具：{{ toy }}
+父给的车：{{ car }}
+ +
+
+
+
+
+
+
\ No newline at end of file
diff --git a/学习VUE/hello_vue3/src/pages/02_custom-event/Child.vue b/学习VUE/hello_vue3/src/pages/02_custom-event/Child.vue
new file mode 100644
index 0000000..a75f17a
--- /dev/null
+++ b/学习VUE/hello_vue3/src/pages/02_custom-event/Child.vue
@@ -0,0 +1,26 @@
+
+ 父组件
+汽车：{{ car }}
+子给的玩具：{{ toy }}
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/学习VUE/hello_vue3/src/pages/02_custom-event/Father.vue b/学习VUE/hello_vue3/src/pages/02_custom-event/Father.vue
new file mode 100644
index 0000000..7cbcdec
--- /dev/null
+++ b/学习VUE/hello_vue3/src/pages/02_custom-event/Father.vue
@@ -0,0 +1,31 @@
+
+ 子组件
+玩具：{{ toy }}
+ + +
+
+
+
+
+
+
\ No newline at end of file
diff --git a/学习VUE/hello_vue3/src/pages/03_mitt/Child1.vue b/学习VUE/hello_vue3/src/pages/03_mitt/Child1.vue
new file mode 100644
index 0000000..ebeb129
--- /dev/null
+++ b/学习VUE/hello_vue3/src/pages/03_mitt/Child1.vue
@@ -0,0 +1,28 @@
+
+ 父组件
+子给的玩具：{{ toy }}
+ +
+
+
+
+
+
+
\ No newline at end of file
diff --git a/学习VUE/hello_vue3/src/pages/03_mitt/Child2.vue b/学习VUE/hello_vue3/src/pages/03_mitt/Child2.vue
new file mode 100644
index 0000000..739675a
--- /dev/null
+++ b/学习VUE/hello_vue3/src/pages/03_mitt/Child2.vue
@@ -0,0 +1,34 @@
+
+ 子组件1
+玩具：{{ toy }}
+ +
+
+
+
+
+
+
\ No newline at end of file
diff --git a/学习VUE/hello_vue3/src/pages/03_mitt/Father.vue b/学习VUE/hello_vue3/src/pages/03_mitt/Father.vue
new file mode 100644
index 0000000..b8626c1
--- /dev/null
+++ b/学习VUE/hello_vue3/src/pages/03_mitt/Father.vue
@@ -0,0 +1,23 @@
+
+ 子组件2
+电脑：{{ computer }}
+哥哥给的玩具：{{ toy }}
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/学习VUE/hello_vue3/src/pages/04_v-model/AtguiguInput.vue b/学习VUE/hello_vue3/src/pages/04_v-model/AtguiguInput.vue
new file mode 100644
index 0000000..20b5089
--- /dev/null
+++ b/学习VUE/hello_vue3/src/pages/04_v-model/AtguiguInput.vue
@@ -0,0 +1,28 @@
+
+
+ 父组件
++ + + + + + \ No newline at end of file diff --git a/学习VUE/hello_vue3/src/pages/04_v-model/Father.vue b/学习VUE/hello_vue3/src/pages/04_v-model/Father.vue new file mode 100644 index 0000000..338c383 --- /dev/null +++ b/学习VUE/hello_vue3/src/pages/04_v-model/Father.vue @@ -0,0 +1,36 @@ + +
+
+
+
+
+
+
diff --git a/学习VUE/hello_vue3/src/pages/05_$attrs/Child.vue b/学习VUE/hello_vue3/src/pages/05_$attrs/Child.vue
new file mode 100644
index 0000000..021c663
--- /dev/null
+++ b/学习VUE/hello_vue3/src/pages/05_$attrs/Child.vue
@@ -0,0 +1,20 @@
+
+ 父组件
+{{ username }}
+{{ password }}
+ + + + + + + + + +
+
+
+
+
+
+
\ No newline at end of file
diff --git a/学习VUE/hello_vue3/src/pages/05_$attrs/Father.vue b/学习VUE/hello_vue3/src/pages/05_$attrs/Father.vue
new file mode 100644
index 0000000..2836101
--- /dev/null
+++ b/学习VUE/hello_vue3/src/pages/05_$attrs/Father.vue
@@ -0,0 +1,32 @@
+
+ 子组件
+
+
+
+
+
+
+
diff --git a/学习VUE/hello_vue3/src/pages/05_$attrs/GrandChild.vue b/学习VUE/hello_vue3/src/pages/05_$attrs/GrandChild.vue
new file mode 100644
index 0000000..8dac159
--- /dev/null
+++ b/学习VUE/hello_vue3/src/pages/05_$attrs/GrandChild.vue
@@ -0,0 +1,26 @@
+
+ 父组件
+a：{{a}}
+b：{{b}}
+c：{{c}}
+d：{{d}}
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/学习VUE/hello_vue3/src/pages/06_$refs-$parent/Child1.vue b/学习VUE/hello_vue3/src/pages/06_$refs-$parent/Child1.vue
new file mode 100644
index 0000000..d1b0b25
--- /dev/null
+++ b/学习VUE/hello_vue3/src/pages/06_$refs-$parent/Child1.vue
@@ -0,0 +1,34 @@
+
+ 孙组件
+a：{{ a }}
+b：{{ b }}
+c：{{ c }}
+d：{{ d }}
+x：{{ x }}
+y：{{ y }}
+ +
+
+
+
+
+
+
diff --git a/学习VUE/hello_vue3/src/pages/06_$refs-$parent/Child2.vue b/学习VUE/hello_vue3/src/pages/06_$refs-$parent/Child2.vue
new file mode 100644
index 0000000..a43ee22
--- /dev/null
+++ b/学习VUE/hello_vue3/src/pages/06_$refs-$parent/Child2.vue
@@ -0,0 +1,26 @@
+
+ 子组件1
+玩具：{{ toy }}
+书籍：{{ book }} 本
+ +
+
+
+
+
+
+
diff --git a/学习VUE/hello_vue3/src/pages/06_$refs-$parent/Father.vue b/学习VUE/hello_vue3/src/pages/06_$refs-$parent/Father.vue
new file mode 100644
index 0000000..9fd2b0f
--- /dev/null
+++ b/学习VUE/hello_vue3/src/pages/06_$refs-$parent/Father.vue
@@ -0,0 +1,65 @@
+
+ 子组件2
+电脑：{{ computer }}
+书籍：{{ book }} 本
+
+
+
+
+
+
+
+
diff --git a/学习VUE/hello_vue3/src/pages/07_provide-inject/Child.vue b/学习VUE/hello_vue3/src/pages/07_provide-inject/Child.vue
new file mode 100644
index 0000000..4fbb8ec
--- /dev/null
+++ b/学习VUE/hello_vue3/src/pages/07_provide-inject/Child.vue
@@ -0,0 +1,20 @@
+
+ 父组件
+房产：{{ house }}
+ + + +
+
+
+
+
+
+
\ No newline at end of file
diff --git a/学习VUE/hello_vue3/src/pages/07_provide-inject/Father.vue b/学习VUE/hello_vue3/src/pages/07_provide-inject/Father.vue
new file mode 100644
index 0000000..74b3c0d
--- /dev/null
+++ b/学习VUE/hello_vue3/src/pages/07_provide-inject/Father.vue
@@ -0,0 +1,35 @@
+
+ 我是子组件
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/学习VUE/hello_vue3/src/pages/07_provide-inject/GrandChild.vue b/学习VUE/hello_vue3/src/pages/07_provide-inject/GrandChild.vue
new file mode 100644
index 0000000..9fd6df9
--- /dev/null
+++ b/学习VUE/hello_vue3/src/pages/07_provide-inject/GrandChild.vue
@@ -0,0 +1,24 @@
+
+ 父组件
+银子：{{ money }}万元
+车子：一辆{{car.brand}}车，价值{{car.price}}万元
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/学习VUE/hello_vue3/src/pages/08_pinia/Father.vue b/学习VUE/hello_vue3/src/pages/08_pinia/Father.vue
new file mode 100644
index 0000000..eb1477c
--- /dev/null
+++ b/学习VUE/hello_vue3/src/pages/08_pinia/Father.vue
@@ -0,0 +1,17 @@
+
+ 我是孙组件
+银子：{{ money }}
+车子：一辆{{car.brand}}车，价值{{car.price}}万元
+ +
+
+
+
+
+
+
diff --git a/学习VUE/hello_vue3/src/pages/09_slot/Father.vue b/学习VUE/hello_vue3/src/pages/09_slot/Father.vue
new file mode 100644
index 0000000..45df70f
--- /dev/null
+++ b/学习VUE/hello_vue3/src/pages/09_slot/Father.vue
@@ -0,0 +1,52 @@
+
+ 父组件
+直接参考之前所讲的pinia即可
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/学习VUE/hello_vue3/src/pages/09_slot/Game.vue b/学习VUE/hello_vue3/src/pages/09_slot/Game.vue
new file mode 100644
index 0000000..f33cc43
--- /dev/null
+++ b/学习VUE/hello_vue3/src/pages/09_slot/Game.vue
@@ -0,0 +1,32 @@
+
+ 父组件
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/学习VUE/hello_vue3/src/pages/09_slot_作用域插槽/Father.vue b/学习VUE/hello_vue3/src/pages/09_slot_作用域插槽/Father.vue
new file mode 100644
index 0000000..45df70f
--- /dev/null
+++ b/学习VUE/hello_vue3/src/pages/09_slot_作用域插槽/Father.vue
@@ -0,0 +1,52 @@
+
+ 游戏列表
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/学习VUE/hello_vue3/src/pages/09_slot_作用域插槽/Game.vue b/学习VUE/hello_vue3/src/pages/09_slot_作用域插槽/Game.vue
new file mode 100644
index 0000000..f33cc43
--- /dev/null
+++ b/学习VUE/hello_vue3/src/pages/09_slot_作用域插槽/Game.vue
@@ -0,0 +1,32 @@
+
+ 父组件
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
- + {{ y.name }} + +
-
+
- + {{ item.name }} + +
{{ g.name }}
+ +
+
+
+
+
+
+
\ No newline at end of file
diff --git a/学习VUE/hello_vue3/src/pages/09_slot_具名插槽/Category.vue b/学习VUE/hello_vue3/src/pages/09_slot_具名插槽/Category.vue
new file mode 100644
index 0000000..1d67f16
--- /dev/null
+++ b/学习VUE/hello_vue3/src/pages/09_slot_具名插槽/Category.vue
@@ -0,0 +1,21 @@
+
+ 游戏列表
+
+ 默认内容1
+ 默认内容2
+
+
+
+
+
+
\ No newline at end of file
diff --git a/学习VUE/hello_vue3/src/pages/09_slot_具名插槽/Father.vue b/学习VUE/hello_vue3/src/pages/09_slot_具名插槽/Father.vue
new file mode 100644
index 0000000..36c0d2c
--- /dev/null
+++ b/学习VUE/hello_vue3/src/pages/09_slot_具名插槽/Father.vue
@@ -0,0 +1,71 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/学习VUE/hello_vue3/src/pages/09_slot_默认插槽/Category.vue b/学习VUE/hello_vue3/src/pages/09_slot_默认插槽/Category.vue
new file mode 100644
index 0000000..ce25e02
--- /dev/null
+++ b/学习VUE/hello_vue3/src/pages/09_slot_默认插槽/Category.vue
@@ -0,0 +1,27 @@
+
+ 父组件
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
+
+
+
+ -
+
- {{ g.name }} +
热门游戏列表
+ +今日美食城市
+ +今日影视推荐
+ +
+ 默认内容
+
+
+
+
+
+
\ No newline at end of file
diff --git a/学习VUE/hello_vue3/src/pages/09_slot_默认插槽/Father.vue b/学习VUE/hello_vue3/src/pages/09_slot_默认插槽/Father.vue
new file mode 100644
index 0000000..dda1b56
--- /dev/null
+++ b/学习VUE/hello_vue3/src/pages/09_slot_默认插槽/Father.vue
@@ -0,0 +1,48 @@
+
+ {{title}}
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/学习VUE/hello_vue3/src/router/index.ts b/学习VUE/hello_vue3/src/router/index.ts
index e6ada50..da9bc1c 100644
--- a/学习VUE/hello_vue3/src/router/index.ts
+++ b/学习VUE/hello_vue3/src/router/index.ts
@@ -1,42 +1,52 @@
-import {createRouter, createWebHistory} from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
+import Props from '@/pages/01_props/Father.vue'
+import Event from '@/pages/02_custom-event/Father.vue'
+import Bus from '@/pages/03_mitt/Father.vue'
+import Model from '@/pages/04_v-model/Father.vue'
+import AttrsListeners from '@/pages/05_$attrs/Father.vue'
+import RefChildrenParent from '@/pages/06_$refs-$parent/Father.vue'
+import ProvideInject from '@/pages/07_provide-inject/Father.vue'
+import Pinia from '@/pages/08_pinia/Father.vue'
+import Slot from '@/pages/09_slot/Father.vue'
-import Home from '@/pages/Home.vue'
-import News from '@/pages/News.vue'
-import About from '@/pages/About.vue'
-import Details from '@/pages/Details.vue'
-
-//创建路由器
-const router = createRouter({
- history: createWebHistory(), //路由器的工作模式
+export default createRouter({
+ history: createWebHistory(),
routes: [
{
- name: 'home',
- path: '/',
- component: Home
+ path: '/props',
+ component: Props
},
{
- name: 'news',
- path: '/news',
- component: News,
- children: [
- {
- name: 'news-details',
- path: 'details', // 注意：子路由的 path 不需要以 "/" 开头
- component: Details
- }
- ]
+ path: '/event',
+ component: Event
},
{
- name: 'about',
- path: '/about',
- component: About
+ path: '/mitt',
+ component: Bus
},
{
- path: '/news',
- redirect: '/about', // 重定向
- }
+ path: '/model',
+ component: Model
+ },
+ {
+ path: '/attrs',
+ component: AttrsListeners
+ },
+ {
+ path: '/ref-parent',
+ component: RefChildrenParent
+ },
+ {
+ path: '/provide-inject',
+ component: ProvideInject
+ },
+ {
+ path: '/pinia',
+ component: Pinia
+ },
+ {
+ path: '/slot',
+ component: Slot
+ },
]
-})
-
-// 暴露出去 router
-export default router
\ No newline at end of file
+})
\ No newline at end of file
diff --git a/学习VUE/hello_vue3/src/store/lovetalk.ts b/学习VUE/hello_vue3/src/store/lovetalk.ts
index df69c05..658f1d9 100644
--- a/学习VUE/hello_vue3/src/store/lovetalk.ts
+++ b/学习VUE/hello_vue3/src/store/lovetalk.ts
@@ -1,13 +1,22 @@
-import { defineStore } from 'pinia';
+import {defineStore} from 'pinia';
+import {reactive} from 'vue'
-export const useTalkStore = defineStore('talk', {
- state() {
- // 获取 localStorage 中的数据，并判断是否存在
- const storedTalkList = localStorage.getItem('talkList');
+// 选项式
+// export const useTalkStore = defineStore('talk', {
+// state() {
+// // 获取 localStorage 中的数据，并判断是否存在
+// const storedTalkList = localStorage.getItem('talkList');
+//
+// // 如果存储的 talkList 存在，则解析它，否则使用空数组
+// return {
+// talkList: storedTalkList ? JSON.parse(storedTalkList) : []
+// };
+// }
+// });
- // 如果存储的 talkList 存在，则解析它，否则使用空数组
- return {
- talkList: storedTalkList ? JSON.parse(storedTalkList) : []
- };
- }
+// 组合式
+export const useTalkStore = defineStore('talk', () => {
+ const storedTalkList = localStorage.getItem('talkList');
+ const talkList = reactive(storedTalkList ? JSON.parse(storedTalkList) : [])
+ return {talkList}
});
diff --git a/学习VUE/hello_vue3/笔记/store组合式写法.ts b/学习VUE/hello_vue3/笔记/store组合式写法.ts
new file mode 100644
index 0000000..581cc39
--- /dev/null
+++ b/学习VUE/hello_vue3/笔记/store组合式写法.ts
@@ -0,0 +1,9 @@
+import {defineStore} from 'pinia';
+import {reactive} from 'vue'
+
+// 组合式
+export const useTalkStore = defineStore('talk', () => {
+ const storedTalkList = localStorage.getItem('talkList');
+ const talkList = reactive(storedTalkList ? JSON.parse(storedTalkList) : [])
+ return {talkList}
+});
父组件
+
+
+
+
+ ![]()
+
+
+
+
+
+ -
+
- {{ g.name }} +