'插槽'

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>
 

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;

src/views/pinia/component/child-A.vue

@@ -26,6 +26,6 @@ const updateCount = ()=>{
 .box1{
   width: 300px;
   height: 200px;
-  background: darkorange;
+  background: lightgrey;
 }
 </style>

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;

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>

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>

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>