From 0f623c5fb618317b8813bf2e3690503a33a5f969 Mon Sep 17 00:00:00 2001
From: "yingfeng.ai" <aiyingfeng110@qq.com>
Date: Wed, 6 Nov 2024 18:09:19 +0800
Subject: [PATCH] =?UTF-8?q?vue=E5=AD=A6=E4=B9=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 学习VUE/hello_vue3/index.html                 |  1 +
 学习VUE/hello_vue3/src/App.vue                | 49 +++++++++---
 .../hello_vue3/src/pages/01_props/Child.vue   | 25 +++++++
 .../hello_vue3/src/pages/01_props/Father.vue  | 28 +++++++
 .../src/pages/02_custom-event/Child.vue       | 26 +++++++
 .../src/pages/02_custom-event/Father.vue      | 31 ++++++++
 .../hello_vue3/src/pages/03_mitt/Child1.vue   | 28 +++++++
 .../hello_vue3/src/pages/03_mitt/Child2.vue   | 34 +++++++++
 .../hello_vue3/src/pages/03_mitt/Father.vue   | 23 ++++++
 .../src/pages/04_v-model/AtguiguInput.vue     | 28 +++++++
 .../hello_vue3/src/pages/04_v-model/Father.vue | 36 +++++++++
 .../hello_vue3/src/pages/05_$attrs/Child.vue  | 20 +++++
 .../hello_vue3/src/pages/05_$attrs/Father.vue | 32 ++++++++
 .../src/pages/05_$attrs/GrandChild.vue        | 26 +++++++
 .../src/pages/06_$refs-$parent/Child1.vue     | 34 +++++++++
 .../src/pages/06_$refs-$parent/Child2.vue     | 26 +++++++
 .../src/pages/06_$refs-$parent/Father.vue     | 65 ++++++++++++++++
 .../src/pages/07_provide-inject/Child.vue     | 20 +++++
 .../src/pages/07_provide-inject/Father.vue    | 35 +++++++++
 .../src/pages/07_provide-inject/GrandChild.vue | 24 ++++++
 .../hello_vue3/src/pages/08_pinia/Father.vue  | 17 +++++
 .../hello_vue3/src/pages/09_slot/Father.vue   | 52 +++++++++++++
 学习VUE/hello_vue3/src/pages/09_slot/Game.vue | 32 ++++++++
 .../src/pages/09_slot_作用域插槽/Father.vue   | 52 +++++++++++++
 .../src/pages/09_slot_作用域插槽/Game.vue     | 32 ++++++++
 .../src/pages/09_slot_具名插槽/Category.vue   | 21 ++++++
 .../src/pages/09_slot_具名插槽/Father.vue     | 71 ++++++++++++++++++
 .../src/pages/09_slot_默认插槽/Category.vue   | 27 +++++++
 .../src/pages/09_slot_默认插槽/Father.vue     | 48 ++++++++++++
 学习VUE/hello_vue3/src/router/index.ts        | 74 +++++++++++--------
 学习VUE/hello_vue3/src/store/lovetalk.ts      | 29 +++++---
 学习VUE/hello_vue3/笔记/store组合式写法.ts    |  9 +++
 32 files changed, 1003 insertions(+), 52 deletions(-)
 create mode 100644 学习VUE/hello_vue3/src/pages/01_props/Child.vue
 create mode 100644 学习VUE/hello_vue3/src/pages/01_props/Father.vue
 create mode 100644 学习VUE/hello_vue3/src/pages/02_custom-event/Child.vue
 create mode 100644 学习VUE/hello_vue3/src/pages/02_custom-event/Father.vue
 create mode 100644 学习VUE/hello_vue3/src/pages/03_mitt/Child1.vue
 create mode 100644 学习VUE/hello_vue3/src/pages/03_mitt/Child2.vue
 create mode 100644 学习VUE/hello_vue3/src/pages/03_mitt/Father.vue
 create mode 100644 学习VUE/hello_vue3/src/pages/04_v-model/AtguiguInput.vue
 create mode 100644 学习VUE/hello_vue3/src/pages/04_v-model/Father.vue
 create mode 100644 学习VUE/hello_vue3/src/pages/05_$attrs/Child.vue
 create mode 100644 学习VUE/hello_vue3/src/pages/05_$attrs/Father.vue
 create mode 100644 学习VUE/hello_vue3/src/pages/05_$attrs/GrandChild.vue
 create mode 100644 学习VUE/hello_vue3/src/pages/06_$refs-$parent/Child1.vue
 create mode 100644 学习VUE/hello_vue3/src/pages/06_$refs-$parent/Child2.vue
 create mode 100644 学习VUE/hello_vue3/src/pages/06_$refs-$parent/Father.vue
 create mode 100644 学习VUE/hello_vue3/src/pages/07_provide-inject/Child.vue
 create mode 100644 学习VUE/hello_vue3/src/pages/07_provide-inject/Father.vue
 create mode 100644 学习VUE/hello_vue3/src/pages/07_provide-inject/GrandChild.vue
 create mode 100644 学习VUE/hello_vue3/src/pages/08_pinia/Father.vue
 create mode 100644 学习VUE/hello_vue3/src/pages/09_slot/Father.vue
 create mode 100644 学习VUE/hello_vue3/src/pages/09_slot/Game.vue
 create mode 100644 学习VUE/hello_vue3/src/pages/09_slot_作用域插槽/Father.vue
 create mode 100644 学习VUE/hello_vue3/src/pages/09_slot_作用域插槽/Game.vue
 create mode 100644 学习VUE/hello_vue3/src/pages/09_slot_具名插槽/Category.vue
 create mode 100644 学习VUE/hello_vue3/src/pages/09_slot_具名插槽/Father.vue
 create mode 100644 学习VUE/hello_vue3/src/pages/09_slot_默认插槽/Category.vue
 create mode 100644 学习VUE/hello_vue3/src/pages/09_slot_默认插槽/Father.vue
 create mode 100644 学习VUE/hello_vue3/笔记/store组合式写法.ts

diff --git a/学习VUE/hello_vue3/index.html b/学习VUE/hello_vue3/index.html
index a888544..5834566 100644
--- a/学习VUE/hello_vue3/index.html
+++ b/学习VUE/hello_vue3/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <title>Vite App</title>
   </head>
   <body>
diff --git a/学习VUE/hello_vue3/src/App.vue b/学习VUE/hello_vue3/src/App.vue
index 2131d76..6ce8b45 100644
--- a/学习VUE/hello_vue3/src/App.vue
+++ b/学习VUE/hello_vue3/src/App.vue
@@ -1,16 +1,45 @@
 <template>
-  <div>
-    <Count/>
-    <br>
-    <LoveTalk/>
+  <div class="container-fluid wraper">
+    <h1 class="title">
+      Vue3 组件间通信
+    </h1>
+    <hr>
+    <div class="row">
+      <div class="col-xs-3 col-md-3 col-lg-3 col-xl-3">
+        <!-- 导航区 -->
+        <router-link active-class="active" class="list-group-item" to="/props">1. props</router-link>
+        <router-link active-class="active" class="list-group-item" to="/event">2. 自定义事件</router-link>
+        <router-link active-class="active" class="list-group-item" to="/mitt">3. mitt</router-link>
+        <router-link active-class="active" class="list-group-item" to="/model">4. v-model</router-link>
+        <router-link active-class="active" class="list-group-item" to="/attrs">5. $attrs</router-link>
+        <router-link active-class="active" class="list-group-item" to="/ref-parent">6. <span class="small">$refs、$parent</span></router-link>
+        <router-link active-class="active" class="list-group-item" to="/provide-inject">7. provide、inject</router-link>
+        <router-link active-class="active" class="list-group-item" to="/pinia">8. pinia</router-link>
+        <router-link active-class="active" class="list-group-item" to="/slot">9. slot</router-link>
+      </div>
+      <div class="col-xs-9 col-md-9 col-lg-9 col-xl-9">
+        <div class="panel-body">
+          <!-- 占位一个展示区 -->
+          <router-view></router-view>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup lang="ts">
-import Count from '@/components/Count.vue'
-import LoveTalk from '@/components/LoveTalk.vue'
+<script setup lang="ts" name="App">
 </script>
 
-<style scoped>
-
-</style>
+<style>
+.wraper .title {
+  padding: 20px;
+  text-align: center;
+  min-width: 610px;
+}
+.wraper .small{
+  font-size: 15px;
+}
+.wraper .list-group-item {
+  min-width: 230px;
+}
+</style>
\ 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 @@
+<template>
+  <div class="child">
+    <h3>子组件</h3>
+		<h4>玩具：{{ toy }}</h4>
+		<h4>父给的车：{{ car }}</h4>
+		<button @click="sendToy(toy)">把玩具给父亲</button>
+  </div>
+</template>
+
+<script setup lang="ts" name="Child">
+	import {ref} from 'vue'
+	// 数据
+	let toy = ref('奥特曼')
+	// 声明接收props
+	defineProps(['car','sendToy'])
+</script>
+
+<style scoped>
+	.child{
+		background-color: skyblue;
+		padding: 10px;
+		box-shadow: 0 0 10px black;
+		border-radius: 10px;
+	}
+</style>
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 @@
+<template>
+  <div class="father">
+    <h3>父组件</h3>
+		<h4>汽车：{{ car }}</h4>
+		<h4 v-show="toy">子给的玩具：{{ toy }}</h4>
+		<Child :car="car" :sendToy="getToy"/>
+  </div>
+</template>
+
+<script setup lang="ts" name="Father">
+	import Child from './Child.vue'
+	import {ref} from 'vue'
+	// 数据
+	let car = ref('奔驰')
+	let toy = ref('')
+	// 方法
+	function getToy(value:string){
+		toy.value = value
+	}
+</script>
+
+<style scoped>
+	.father{
+		background-color:rgb(165, 164, 164);
+		padding: 20px;
+		border-radius: 10px;
+	}
+</style>
\ 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 @@
+<template>
+  <div class="child">
+    <h3>子组件</h3>
+		<h4>玩具：{{ toy }}</h4>
+    <!--  通过点击事件触发 send-toy 事件 在send-toy 事件中触发saveToy函数，并传入变量toy，变量toy的值是'奥特曼' -->
+		<button @click="emit('send-toy',toy)">测试</button>
+  </div>
+</template>
+
+<script setup lang="ts" name="Child">
+	import { ref } from "vue";
+	// 数据
+	let toy = ref('奥特曼')
+	// 声明事件
+	const emit =  defineEmits(['send-toy'])
+</script>
+
+<style scoped>
+	.child{
+		margin-top: 10px;
+		background-color: rgb(76, 209, 76);
+		padding: 10px;
+		box-shadow: 0 0 10px black;
+		border-radius: 10px;
+	}
+</style>
\ 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 @@
+<template>
+  <div class="father">
+    <h3>父组件</h3>
+		<h4 v-show="toy">子给的玩具：{{ toy }}</h4>
+		<!-- 给子组件Child绑定自定义事件 -->
+    <Child @send-toy="saveToy"/>
+  </div>
+</template>
+
+<script setup lang="ts" name="Father">
+  import Child from './Child.vue'
+	import { ref } from "vue";
+	// 数据
+	let toy = ref('')
+	// 用于保存传递过来的玩具
+	function saveToy(value:string){
+		console.log('saveToy',value)
+		toy.value = value
+	}
+</script>
+
+<style scoped>
+	.father{
+		background-color:rgb(165, 164, 164);
+		padding: 20px;
+    border-radius: 10px;
+	}
+	.father button{
+		margin-right: 5px;
+	}
+</style>
\ 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 @@
+<template>
+  <div class="child1">
+    <h3>子组件1</h3>
+		<h4>玩具：{{ toy }}</h4>
+		<button @click="emitter.emit('send-toy',toy)">玩具给弟弟</button>
+  </div>
+</template>
+
+<script setup lang="ts" name="Child1">
+	import {ref} from 'vue'
+	import emitter from '@/utils/emitter';
+
+	// 数据
+	let toy = ref('奥特曼')
+</script>
+
+<style scoped>
+	.child1{
+		margin-top: 50px;
+		background-color: skyblue;
+		padding: 10px;
+		box-shadow: 0 0 10px black;
+		border-radius: 10px;
+	}
+	.child1 button{
+		margin-right: 10px;
+	}
+</style>
\ 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 @@
+<template>
+  <div class="child2">
+    <h3>子组件2</h3>
+		<h4>电脑：{{ computer }}</h4>
+		<h4>哥哥给的玩具：{{ toy }}</h4>
+  </div>
+</template>
+
+<script setup lang="ts" name="Child2">
+	import {ref,onUnmounted} from 'vue'
+	import emitter from '@/utils/emitter';
+	// 数据
+	let computer = ref('联想')
+	let toy = ref('')
+
+	// 给emitter绑定send-toy事件
+	emitter.on('send-toy',(value:any)=>{
+		toy.value = value
+	})
+	// 在组件卸载时解绑send-toy事件
+	onUnmounted(()=>{
+		emitter.off('send-toy')
+	})
+</script>
+
+<style scoped>
+	.child2{
+		margin-top: 50px;
+		background-color: orange;
+		padding: 10px;
+		box-shadow: 0 0 10px black;
+		border-radius: 10px;
+	}
+</style>
\ 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 @@
+<template>
+  <div class="father">
+    <h3>父组件</h3>
+    <Child1/>
+    <Child2/>
+  </div>
+</template>
+
+<script setup lang="ts" name="Father">
+  import Child1 from './Child1.vue'
+  import Child2 from './Child2.vue'
+</script>
+
+<style scoped>
+	.father{
+		background-color:rgb(165, 164, 164);
+		padding: 20px;
+    border-radius: 10px;
+	}
+  .father button{
+    margin-left: 5px;
+  }
+</style>
\ 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 @@
+<template>
+  <input 
+    type="text" 
+    :value="ming"
+    @input="emit('update:ming',(<HTMLInputElement>$event.target).value)"
+  >
+  <br>
+  <input 
+    type="text" 
+    :value="mima"
+    @input="emit('update:mima',(<HTMLInputElement>$event.target).value)"
+  >
+</template>
+
+<script setup lang="ts" name="AtguiguInput">
+  defineProps(['ming','mima'])
+  const emit = defineEmits(['update:ming','update:mima'])
+</script>
+
+<style scoped>
+  input {
+    border: 2px solid black;
+    background-image: linear-gradient(45deg,red,yellow,green);
+    height: 30px;
+    font-size: 20px;
+    color: white;
+  }
+</style>
\ 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 @@
+<template>
+  <div class="father">
+    <h3>父组件</h3>
+    <h4>{{ username }}</h4>
+    <h4>{{ password }}</h4>
+    <!-- v-model用在html标签上 -->
+    <!-- <input type="text" v-model="username"> -->
+    <!-- <input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target).value"> -->
+
+    <!-- v-model用在组件标签上 -->
+    <!-- <AtguiguInput v-model="username"/> -->
+    <!-- <AtguiguInput 
+      :modelValue="username" 
+      @update:modelValue="username = $event"
+    /> -->
+
+    <!-- 修改modelValue -->
+    <AtguiguInput v-model:ming="username" v-model:mima="password"/>
+  </div>
+</template>
+
+<script setup lang="ts" name="Father">
+	import { ref } from "vue";
+  import AtguiguInput from './AtguiguInput.vue'
+  // 数据
+  let username = ref('zhansgan')
+  let password = ref('123456')
+</script>
+
+<style scoped>
+.father {
+  padding: 20px;
+  background-color: rgb(165, 164, 164);
+  border-radius: 10px;
+}
+</style>
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 @@
+<template>
+	<div class="child">
+		<h3>子组件</h3>
+		<GrandChild v-bind="$attrs"/>
+	</div>
+</template>
+
+<script setup lang="ts" name="Child">
+	import GrandChild from './GrandChild.vue'
+</script>
+
+<style scoped>
+	.child{
+		margin-top: 20px;
+		background-color: skyblue;
+		padding: 20px;
+		border-radius: 10px;
+		box-shadow: 0 0 10px black;
+	}
+</style>
\ 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 @@
+<template>
+  <div class="father">
+    <h3>父组件</h3>
+		<h4>a：{{a}}</h4>
+		<h4>b：{{b}}</h4>
+		<h4>c：{{c}}</h4>
+		<h4>d：{{d}}</h4>
+		<Child :a="a" :b="b" :c="c" :d="d" v-bind="{x:100,y:200}" :updateA="updateA"/>
+  </div>
+</template>
+
+<script setup lang="ts" name="Father">
+	import Child from './Child.vue'
+	import {ref} from 'vue'
+
+	let a = ref(1)
+	let b = ref(2)
+	let c = ref(3)
+	let d = ref(4)
+
+	function updateA(value:number){
+		a.value += value
+	}
+</script>
+
+<style scoped>
+	.father{
+		background-color: rgb(165, 164, 164);
+		padding: 20px;
+		border-radius: 10px;
+	}
+</style>
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 @@
+<template>
+	<div class="grand-child">
+		<h3>孙组件</h3>
+		<h4>a：{{ a }}</h4>
+		<h4>b：{{ b }}</h4>
+		<h4>c：{{ c }}</h4>
+		<h4>d：{{ d }}</h4>
+		<h4>x：{{ x }}</h4>
+		<h4>y：{{ y }}</h4>
+		<button @click="updateA(6)">点我将爷爷那的a更新</button>
+	</div>
+</template>
+
+<script setup lang="ts" name="GrandChild">
+	defineProps(['a','b','c','d','x','y','updateA'])
+</script>
+
+<style scoped>
+	.grand-child{
+		margin-top: 20px;
+		background-color: orange;
+		padding: 20px;
+		border-radius: 10px;
+		box-shadow: 0 0 10px black;
+	}
+</style>
\ 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 @@
+<template>
+  <div class="child1">
+    <h3>子组件1</h3>
+		<h4>玩具：{{ toy }}</h4>
+		<h4>书籍：{{ book }} 本</h4>
+		<button @click="minusHouse($parent)">干掉父亲的一套房产</button>
+  </div>
+</template>
+
+<script setup lang="ts" name="Child1">
+	import { ref } from "vue";
+	// 数据
+	let toy = ref('奥特曼')
+	let book = ref(3)
+
+	// 方法
+	function minusHouse(parent:any){
+		parent.house -= 1
+	}
+
+	// 把数据交给外部
+	defineExpose({toy,book})
+
+</script>
+
+<style scoped>
+	.child1{
+		margin-top: 20px;
+		background-color: skyblue;
+		padding: 20px;
+		border-radius: 10px;
+    box-shadow: 0 0 10px black;
+	}
+</style>
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 @@
+<template>
+  <div class="child2">
+    <h3>子组件2</h3>
+		<h4>电脑：{{ computer }}</h4>
+		<h4>书籍：{{ book }} 本</h4>
+  </div>
+</template>
+
+<script setup lang="ts" name="Child2">
+		import { ref } from "vue";
+		// 数据
+		let computer = ref('联想')
+		let book = ref(6)
+		// 把数据交给外部
+		defineExpose({computer,book})
+</script>
+
+<style scoped>
+	.child2{
+		margin-top: 20px;
+		background-color: orange;
+		padding: 20px;
+		border-radius: 10px;
+    box-shadow: 0 0 10px black;
+	}
+</style>
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 @@
+<template>
+	<div class="father">
+		<h3>父组件</h3>
+		<h4>房产：{{ house }}</h4>
+		<button @click="changeToy">修改Child1的玩具</button>
+		<button @click="changeComputer">修改Child2的电脑</button>
+		<button @click="getAllChild($refs)">让所有孩子的书变多</button>
+		<Child1 ref="c1"/>
+		<Child2 ref="c2"/>
+	</div>
+</template>
+
+<script setup lang="ts" name="Father">
+	import Child1 from './Child1.vue'
+	import Child2 from './Child2.vue'
+	import { ref,reactive } from "vue";
+	let c1 = ref()
+	let c2 = ref()
+
+	// 注意点：当访问obj.c的时候，底层会自动读取value属性，因为c是在obj这个响应式对象中的
+	/* let obj = reactive({
+		a:1,
+		b:2,
+		c:ref(3)
+	})
+	let x = ref(4)
+
+	console.log(obj.a)
+	console.log(obj.b)
+	console.log(obj.c)
+	console.log(x) */
+	
+
+	// 数据
+	let house = ref(4)
+	// 方法
+	function changeToy(){
+		c1.value.toy = '小猪佩奇'
+	}
+	function changeComputer(){
+		c2.value.computer = '华为'
+	}
+	function getAllChild(refs:{[key:string]:any}){
+		console.log(refs)
+		for (let key in refs){
+			refs[key].book += 3
+		}
+	}
+	// 向外部提供数据
+	defineExpose({house})
+</script>
+
+<style scoped>
+	.father {
+		background-color: rgb(165, 164, 164);
+		padding: 20px;
+		border-radius: 10px;
+	}
+
+	.father button {
+		margin-bottom: 10px;
+		margin-left: 10px;
+	}
+</style>
+
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 @@
+<template>
+  <div class="child">
+    <h3>我是子组件</h3>
+    <GrandChild/>
+  </div>
+</template>
+
+<script setup lang="ts" name="Child">
+  import GrandChild from './GrandChild.vue'
+</script>
+
+<style scoped>
+  .child {
+    margin-top: 20px;
+    background-color: skyblue;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px black;
+  }
+</style>
\ 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 @@
+<template>
+  <div class="father">
+    <h3>父组件</h3>
+    <h4>银子：{{ money }}万元</h4>
+    <h4>车子：一辆{{car.brand}}车，价值{{car.price}}万元</h4>
+    <Child/>
+  </div>
+</template>
+
+<script setup lang="ts" name="Father">
+  import Child from './Child.vue'
+  import {ref,reactive,provide} from 'vue'
+
+  let money = ref(100)
+  let car = reactive({
+    brand:'奔驰',
+    price:100
+  })
+  function updateMoney(value:number){
+    money.value -= value
+  }
+
+  // 向后代提供数据
+  provide('moneyContext',{money,updateMoney})
+  provide('car',car)
+
+</script>
+
+<style scoped>
+  .father {
+    background-color: rgb(165, 164, 164);
+    padding: 20px;
+    border-radius: 10px;
+  }
+</style>
\ 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 @@
+<template>
+  <div class="grand-child">
+    <h3>我是孙组件</h3>
+    <h4>银子：{{ money }}</h4>
+    <h4>车子：一辆{{car.brand}}车，价值{{car.price}}万元</h4>
+    <button @click="updateMoney(6)">花爷爷的钱</button>
+  </div>
+</template>
+
+<script setup lang="ts" name="GrandChild">
+  import { inject } from "vue";
+
+  let {money,updateMoney} = inject('moneyContext',{money:0,updateMoney:(param:number)=>{}})
+  let car = inject('car',{brand:'未知',price:0})
+</script>
+
+<style scoped>
+  .grand-child{
+    background-color: orange;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px black;
+  }
+</style>
\ 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 @@
+<template>
+  <div class="father">
+    <h3>父组件</h3>
+    <h3>直接参考之前所讲的pinia即可</h3>
+  </div>
+</template>
+
+<script setup lang="ts" name="Father">
+</script>
+
+<style scoped>
+  .father{
+    background-color: rgb(165, 165, 165);
+    padding: 20px;
+    border-radius: 10px;
+  }
+</style>
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 @@
+<template>
+  <div class="father">
+    <h3>父组件</h3>
+    <div class="content">
+      <Game>
+        <template v-slot="params">
+          <ul>
+            <li v-for="y in params.youxi" :key="y.id">
+              {{ y.name }}
+            </li>
+          </ul>
+        </template>
+      </Game>
+
+      <Game>
+        <template v-slot="params">
+          <ol>
+            <li v-for="item in params.youxi" :key="item.id">
+              {{ item.name }}
+            </li>
+          </ol>
+        </template>
+      </Game>
+
+      <Game>
+        <template #default="{youxi}">
+          <h3 v-for="g in youxi" :key="g.id">{{ g.name }}</h3>
+        </template>
+      </Game>
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="Father">
+  import Game from './Game.vue'
+</script>
+
+<style scoped>
+  .father {
+    background-color: rgb(165, 164, 164);
+    padding: 20px;
+    border-radius: 10px;
+  }
+  .content {
+    display: flex;
+    justify-content: space-evenly;
+  }
+  img,video {
+    width: 100%;
+  }
+</style>
\ 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 @@
+<template>
+  <div class="game">
+    <h2>游戏列表</h2>
+    <slot :youxi="games" x="哈哈" y="你好"></slot>
+  </div>
+</template>
+
+<script setup lang="ts" name="Game">
+  import {reactive} from 'vue'
+  let games = reactive([
+    {id:'asgytdfats01',name:'英雄联盟'},
+    {id:'asgytdfats02',name:'王者农药'},
+    {id:'asgytdfats03',name:'红色警戒'},
+    {id:'asgytdfats04',name:'斗罗大陆'}
+  ])
+</script>
+
+<style scoped>
+  .game {
+    width: 200px;
+    height: 300px;
+    background-color: skyblue;
+    border-radius: 10px;
+    box-shadow: 0 0 10px;
+  }
+  h2 {
+    background-color: orange;
+    text-align: center;
+    font-size: 20px;
+    font-weight: 800;
+  }
+</style>
\ 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 @@
+<template>
+  <div class="father">
+    <h3>父组件</h3>
+    <div class="content">
+      <Game>
+        <template v-slot="params">
+          <ul>
+            <li v-for="y in params.youxi" :key="y.id">
+              {{ y.name }}
+            </li>
+          </ul>
+        </template>
+      </Game>
+
+      <Game>
+        <template v-slot="params">
+          <ol>
+            <li v-for="item in params.youxi" :key="item.id">
+              {{ item.name }}
+            </li>
+          </ol>
+        </template>
+      </Game>
+
+      <Game>
+        <template #default="{youxi}">
+          <h3 v-for="g in youxi" :key="g.id">{{ g.name }}</h3>
+        </template>
+      </Game>
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="Father">
+  import Game from './Game.vue'
+</script>
+
+<style scoped>
+  .father {
+    background-color: rgb(165, 164, 164);
+    padding: 20px;
+    border-radius: 10px;
+  }
+  .content {
+    display: flex;
+    justify-content: space-evenly;
+  }
+  img,video {
+    width: 100%;
+  }
+</style>
\ 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 @@
+<template>
+  <div class="game">
+    <h2>游戏列表</h2>
+    <slot :youxi="games" x="哈哈" y="你好"></slot>
+  </div>
+</template>
+
+<script setup lang="ts" name="Game">
+  import {reactive} from 'vue'
+  let games = reactive([
+    {id:'asgytdfats01',name:'英雄联盟'},
+    {id:'asgytdfats02',name:'王者农药'},
+    {id:'asgytdfats03',name:'红色警戒'},
+    {id:'asgytdfats04',name:'斗罗大陆'}
+  ])
+</script>
+
+<style scoped>
+  .game {
+    width: 200px;
+    height: 300px;
+    background-color: skyblue;
+    border-radius: 10px;
+    box-shadow: 0 0 10px;
+  }
+  h2 {
+    background-color: orange;
+    text-align: center;
+    font-size: 20px;
+    font-weight: 800;
+  }
+</style>
\ 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 @@
+<template>
+  <div class="category">
+    <slot name="s1">默认内容1</slot>
+    <slot name="s2">默认内容2</slot>
+  </div>
+</template>
+
+<script setup lang="ts" name="Category">
+  
+</script>
+
+<style scoped>
+  .category {
+    background-color: skyblue;
+    border-radius: 10px;
+    box-shadow: 0 0 10px;
+    padding: 10px;
+    width: 200px;
+    height: 300px;
+  }
+</style>
\ 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 @@
+<template>
+  <div class="father">
+    <h3>父组件</h3>
+    <div class="content">
+      <Category>
+        <template v-slot:s2>
+          <ul>
+            <li v-for="g in games" :key="g.id">{{ g.name }}</li>
+          </ul>
+        </template>
+        <template v-slot:s1>
+          <h2>热门游戏列表</h2>
+        </template>
+      </Category>
+
+      <Category>
+        <template v-slot:s2>
+          <img :src="imgUrl" alt="">
+        </template>
+        <template v-slot:s1>
+          <h2>今日美食城市</h2>
+        </template>
+      </Category>
+
+      <Category>
+        <template #s2>
+          <video video :src="videoUrl" controls></video>
+        </template>
+        <template #s1>
+          <h2>今日影视推荐</h2>
+        </template>
+      </Category>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="Father">
+  import Category from './Category.vue'
+  import { ref,reactive } from "vue";
+
+  let games = reactive([
+    {id:'asgytdfats01',name:'英雄联盟'},
+    {id:'asgytdfats02',name:'王者农药'},
+    {id:'asgytdfats03',name:'红色警戒'},
+    {id:'asgytdfats04',name:'斗罗大陆'}
+  ])
+  let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')
+  let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')
+
+</script>
+
+<style scoped>
+  .father {
+    background-color: rgb(165, 164, 164);
+    padding: 20px;
+    border-radius: 10px;
+  }
+  .content {
+    display: flex;
+    justify-content: space-evenly;
+  }
+  img,video {
+    width: 100%;
+  }
+  h2 {
+    background-color: orange;
+    text-align: center;
+    font-size: 20px;
+    font-weight: 800;
+  }
+</style>
\ 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 @@
+<template>
+  <div class="category">
+    <h2>{{title}}</h2>
+    <slot>默认内容</slot>
+  </div>
+</template>
+
+<script setup lang="ts" name="Category">
+  defineProps(['title'])
+</script>
+
+<style scoped>
+  .category {
+    background-color: skyblue;
+    border-radius: 10px;
+    box-shadow: 0 0 10px;
+    padding: 10px;
+    width: 200px;
+    height: 300px;
+  }
+  h2 {
+    background-color: orange;
+    text-align: center;
+    font-size: 20px;
+    font-weight: 800;
+  }
+</style>
\ 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 @@
+<template>
+  <div class="father">
+    <h3>父组件</h3>
+    <div class="content">
+      <Category title="热门游戏列表">
+        <ul>
+          <li v-for="g in games" :key="g.id">{{ g.name }}</li>
+        </ul>
+      </Category>
+      <Category title="今日美食城市">
+        <img :src="imgUrl" alt="">
+      </Category>
+      <Category title="今日影视推荐">
+        <video :src="videoUrl" controls></video>
+      </Category>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="Father">
+  import Category from './Category.vue'
+  import { ref,reactive } from "vue";
+
+  let games = reactive([
+    {id:'asgytdfats01',name:'英雄联盟'},
+    {id:'asgytdfats02',name:'王者农药'},
+    {id:'asgytdfats03',name:'红色警戒'},
+    {id:'asgytdfats04',name:'斗罗大陆'}
+  ])
+  let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')
+  let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')
+
+</script>
+
+<style scoped>
+  .father {
+    background-color: rgb(165, 164, 164);
+    padding: 20px;
+    border-radius: 10px;
+  }
+  .content {
+    display: flex;
+    justify-content: space-evenly;
+  }
+  img,video {
+    width: 100%;
+  }
+</style>
\ 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}
+});