From a3225b9989bd3b62d739cda96d60bdb4deb44648 Mon Sep 17 00:00:00 2001
From: "yingfeng.ai" <aiyingfeng110@qq.com>
Date: Fri, 8 Nov 2024 14:19:30 +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
---
.../src/pages/09_slot_作用域插槽/Father.vue | 28 +++++++------
.../src/pages/09_slot_作用域插槽/Game.vue | 42 ++++++++++---------
.../src/pages/09_slot_默认插槽/Father.vue | 1 +
学习VUE/hello_vue3/src/utils/emitter.ts | 29 +++++++++++++
.../笔记/shallowRef与shallowReactive.vue | 27 ++++++++++++
5 files changed, 94 insertions(+), 33 deletions(-)
create mode 100644 学习VUE/hello_vue3/src/utils/emitter.ts
create mode 100644 学习VUE/hello_vue3/笔记/shallowRef与shallowReactive.vue
diff --git a/学习VUE/hello_vue3/src/pages/09_slot_作用域插槽/Father.vue b/学习VUE/hello_vue3/src/pages/09_slot_作用域插槽/Father.vue
index 45df70f..b3df11a 100644
--- a/学习VUE/hello_vue3/src/pages/09_slot_作用域插槽/Father.vue
+++ b/学习VUE/hello_vue3/src/pages/09_slot_作用域插槽/Father.vue
@@ -33,20 +33,22 @@
</template>
<script setup lang="ts" name="Father">
- import Game from './Game.vue'
+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%;
- }
+.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
index f33cc43..a6bd7e9 100644
--- a/学习VUE/hello_vue3/src/pages/09_slot_作用域插槽/Game.vue
+++ b/学习VUE/hello_vue3/src/pages/09_slot_作用域插槽/Game.vue
@@ -6,27 +6,29 @@
</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:'斗罗大陆'}
- ])
+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;
- }
+.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
index dda1b56..1303f34 100644
--- a/学习VUE/hello_vue3/src/pages/09_slot_默认插槽/Father.vue
+++ b/学习VUE/hello_vue3/src/pages/09_slot_默认插槽/Father.vue
@@ -3,6 +3,7 @@
<h3>父组件</h3>
<div class="content">
<Category title="热门游戏列表">
+<!-- 根据子组建的 <slot>默认内容</slot> 显示内容-->
<ul>
<li v-for="g in games" :key="g.id">{{ g.name }}</li>
</ul>
diff --git a/学习VUE/hello_vue3/src/utils/emitter.ts b/学习VUE/hello_vue3/src/utils/emitter.ts
new file mode 100644
index 0000000..8129c84
--- /dev/null
+++ b/学习VUE/hello_vue3/src/utils/emitter.ts
@@ -0,0 +1,29 @@
+// 引入mitt
+import mitt from 'mitt'
+
+// 调用mitt得到emitter，emitter能：绑定事件、触发事件
+const emitter = mitt()
+
+/* // 绑定事件
+emitter.on('test1',()=>{
+ console.log('test1被调用了')
+})
+emitter.on('test2',()=>{
+ console.log('test2被调用了')
+})
+
+// 触发事件
+setInterval(() => {
+ emitter.emit('test1')
+ emitter.emit('test2')
+}, 1000);
+
+setTimeout(() => {
+ // emitter.off('test1')
+ // emitter.off('test2')
+ emitter.all.clear()
+}, 3000); */
+
+
+// 暴露emitter
+export default emitter
\ No newline at end of file
diff --git a/学习VUE/hello_vue3/笔记/shallowRef与shallowReactive.vue b/学习VUE/hello_vue3/笔记/shallowRef与shallowReactive.vue
new file mode 100644
index 0000000..2e3f6e9
--- /dev/null
+++ b/学习VUE/hello_vue3/笔记/shallowRef与shallowReactive.vue
@@ -0,0 +1,27 @@
+import { shallowRef } from 'vue';
+
+const user = shallowRef({ name: 'Alice', age: 30 });
+
+// 修改 user 本身会触发更新
+user.value = { name: 'Bob', age: 25 }; // 响应式触发
+
+// 修改 user.value 的属性不会触发更新
+user.value.name = 'Charlie'; // 不会触发响应式更新
+
+
+import { shallowReactive } from 'vue';
+
+const user = shallowReactive({
+name: 'Alice',
+age: 30,
+address: {
+city: 'New York',
+zip: '10001'
+}
+});
+
+// 修改一级属性会触发响应式更新
+user.name = 'Bob'; // 响应式触发
+
+// 修改嵌套属性不会触发响应式更新
+user.address.city = 'Los Angeles'; // 不会触发响应式更新