From 7ca988272b09f189ab65693d48c8e3a6a51237f4 Mon Sep 17 00:00:00 2001
From: fwb <fwb>
Date: Wed, 6 Nov 2024 10:09:47 +0800
Subject: [PATCH] =?UTF-8?q?'=E6=8F=92=E6=A7=BD'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                           |  2 +-
 src/store/modules/todo.ts             | 28 ++++++++++++++++++
 src/views/pinia/component/child-A.vue |  2 +-
 src/views/pinia/component/child-B.vue |  9 ++++--
 src/views/slot/component/Test1.vue    | 21 ++++++++++++++
 src/views/slot/component/test.vue     | 25 ++++++++++++++++
 src/views/slot/index.vue              | 41 +++++++++++++++++++++++++++
 7 files changed, 124 insertions(+), 4 deletions(-)
 create mode 100644 src/store/modules/todo.ts
 create mode 100644 src/views/slot/component/Test1.vue
 create mode 100644 src/views/slot/component/test.vue
 create mode 100644 src/views/slot/index.vue

diff --git a/src/App.vue b/src/App.vue
index b971b20..86a4ed7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,7 @@
   <index/>
 </template>
 <script setup lang="ts">
-import Index from "@/views/pinia/index.vue";
+import Index from "@/views/slot/index.vue";
 </script>
 <style scoped>
 
diff --git a/src/store/modules/todo.ts b/src/store/modules/todo.ts
new file mode 100644
index 0000000..d943ca4
--- /dev/null
+++ b/src/store/modules/todo.ts
@@ -0,0 +1,28 @@
+//定义组合式API仓库
+import {defineStore} from "pinia";
+import {ref} from 'vue';
+import {computed} from "vue";
+//创建小仓库
+let useTodoStore = defineStore('todo',()=>{
+    let arr = ref([1,2,3,4,5])
+    const total = computed(()=>{
+        return arr.value.reduce((prev,next)=>{
+            return prev + next;
+        },0 )
+    })
+    let todos = ref([
+        {id:1,title:'吃饭'},
+        {id:2,title:'睡觉'},
+        {id:3,title:'看书'}
+    ]);
+    //务必要返回一个对象:属性与方法可以提供给组件使用
+    return{
+        todos,
+        arr,
+        total,
+        updateTodo(){
+            todos.value.push({id:4,title:'听歌'})
+        }
+    }
+});
+export default useTodoStore;
\ No newline at end of file
diff --git a/src/views/pinia/component/child-A.vue b/src/views/pinia/component/child-A.vue
index 9983e39..51c6104 100644
--- a/src/views/pinia/component/child-A.vue
+++ b/src/views/pinia/component/child-A.vue
@@ -26,6 +26,6 @@ const updateCount = ()=>{
 .box1{
   width: 300px;
   height: 200px;
-  background: darkorange;
+  background: lightgrey;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/pinia/component/child-B.vue b/src/views/pinia/component/child-B.vue
index 9ea9a4b..d6c2319 100644
--- a/src/views/pinia/component/child-B.vue
+++ b/src/views/pinia/component/child-B.vue
@@ -1,15 +1,20 @@
 <template>
   <div class="box2">
     <h1>{{useInfo.count}}+++++++{{useInfo.total}}</h1>
+    <hr>
+    <p @click="updateTodo">{{todoStore.todos}}--{{todoStore.arr}}====={{todoStore.total}}</p>
   </div>
 </template>
-
 <script setup lang="ts">
 import useInfoStore from "@/store/modules/info";
 let useInfo = useInfoStore();
 
+import useTodoStore from "@/store/modules/todo";
+let todoStore = useTodoStore();
+const updateTodo =()=>{
+  todoStore.updateTodo();
+}
 </script>
-
 <style scoped>
 .box2{
   width: 300px;
diff --git a/src/views/slot/component/Test1.vue b/src/views/slot/component/Test1.vue
new file mode 100644
index 0000000..12c2da7
--- /dev/null
+++ b/src/views/slot/component/Test1.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="box1">
+    <ul style="list-style: none">
+      <li v-for="(item,index) in todos" :key="item.id">
+<!--        <p>{{item.title}}</p>-->
+        <slot :$row="item" :$index="index"></slot>
+      </li>
+    </ul>
+  </div>
+</template>
+<script setup lang="ts">
+defineProps(['todos'])
+</script>
+<style scoped>
+.box1{
+  width: 500px;
+  height: 300px;
+  background:lightgray;
+  margin-top: 30px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/slot/component/test.vue b/src/views/slot/component/test.vue
new file mode 100644
index 0000000..cbf558f
--- /dev/null
+++ b/src/views/slot/component/test.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="box">
+    <h2>子组件插槽</h2>
+    <el-divider/>
+    <!-- 默认插槽-->
+    <slot></slot>
+    <el-divider/>
+    <!-- 具名插槽A-->
+    <slot name="a"></slot>
+    <el-divider/>
+    <!-- 具名插槽B-->
+    <slot name="b"></slot>
+    <el-divider/>
+  </div>
+</template>
+<script setup lang="ts">
+
+</script>
+<style scoped>
+.box{
+  width: 500px;
+  height: 300px;
+  background:skyblue;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/slot/index.vue b/src/views/slot/index.vue
new file mode 100644
index 0000000..352fd13
--- /dev/null
+++ b/src/views/slot/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <h2 style="text-align: center">slot</h2>
+    <test>
+      <div>
+        <p>默认插槽</p>
+      </div>
+      <template v-slot:a>
+        <p>具名插槽A</p>
+      </template>
+      <template #b>
+        <p>具名插槽B</p>
+      </template>
+    </test>
+    <Test1 :todos="todos">
+      <template v-slot="{$row,$index}">
+        <span :style="{color:$row.done?'green':'red'}">
+          {{$row.title}}-{{$index}}
+        </span>
+        <el-divider/>
+      </template>
+    </Test1>
+  </div>
+</template>
+<script setup lang="ts">
+//插槽：默认插槽、具名插槽、作用域插槽
+import Test from "@/views/slot/component/test.vue";
+import Test1 from "@/views/slot/component/Test1.vue";
+//作用域插槽:就是可以传递数据的插槽,子组件可以讲数据回传给父组件,父组件可以决定这些回传的数据是以何种结构或者外观在子组件内部去展示!!!
+
+import {ref} from 'vue';
+let todos = ref([
+  {id:1,title:'吃饭',done:true},
+  {id:2,title:'看书',done:true},
+  {id:3,title:'听歌',done:false},
+  {id:4,title:'娱乐',done:false},
+])
+</script>
+<style scoped>
+
+</style>
\ No newline at end of file