vue3

vue3/my_Module/src/App.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="app">
     <h1>组件通信</h1>
-    <Provide></Provide>
+    <!-- <Slot3></Slot3> -->
+    <!-- <Slot2></Slot2> -->
+    <Slot1>
+        <!-- <slot>232232</slot> -->
+    </Slot1>
+    <!-- <Provide></Provide> -->
     <!-- <Parent></Parent> -->
     <!-- <Props /> -->
     <!-- <Event></Event> -->
@@ -11,7 +16,13 @@
 </template>
 
 <script setup lang="ts" name="App">
-import Provide from './components/provide-inject/Father.vue';
+// 默认插槽
+import Slot1 from './components/slot1/Part1.vue';
+// 具名插槽
+// import Slot2 from './components/slot2/Part1.vue';
+// 作用域插槽
+// import Slot3 from './components/slot3/Part1.vue';
+// import Provide from './components/provide-inject/Father.vue';
 // import Parent from './components/$parent-$refs/Father.vue';
 // import Attrs from './components/$attrs/GrandFather.vue'
 // import MittEvent from './components/mitt/Father.vue'

vue3/my_Module/src/components/provide-inject/Father.vue

@@ -13,7 +13,7 @@
 <script setup lang="ts" name="Father6">
 import Child from './Child.vue';
 import {ref,reactive,provide} from 'vue';
-let money = ref();
+let money = ref(10);
 let car = reactive({
     brand:"比亚迪",
     price:10

vue3/my_Module/src/components/provide-inject/GrandSon.vue

@@ -13,7 +13,7 @@
 import {inject} from 'vue';
 let {money,updateMoney} = inject("moneyContent");
 let car = inject("car");
-console.log(car);
+console.log(money);
 function changeMoney() {
   updateMoney();
 }

vue3/my_Module/src/components/slot1/Part1.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="part1">
+    第一部分
+    <Part2 name="哈哈" >
+      <template >
+        <div>
+          默认插槽
+        </div>
+      </template>
+      <!-- 哈哈哈哈哈 -->
+    </Part2>
+    <!-- <slot></slot> -->
+    第二行
+  </div>
+</template>
+
+<script setup name="Part1" lang="ts">
+import Part2 from './Part2.vue';
+</script>
+
+<style>
+
+</style>

vue3/my_Module/src/components/slot1/Part2.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="part2">
+    <!-- 哈哈哈哈 -->
+    <h2>{{ name }}</h2>
+    <slot >默认内容</slot>
+  </div>
+</template>
+
+<script setup name="Part2" lang="ts">
+import { defineProps } from "vue";
+
+defineProps({name})
+</script>
+
+<style>
+
+</style>

vue3/my_Module/src/components/slot2/Part1.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="part1">
+    第一部分
+    <Part2 name="哈哈">
+      <!-- 哈哈哈哈哈 -->
+      <template #s1>
+        哈哈哈哈
+      </template>
+      <template v-slot:s2>
+        s2的内容
+      </template>
+      <template #default>
+        <div>
+          我哈哈哈
+        </div>
+      </template>
+    </Part2>
+    <!-- <slot></slot> -->
+    第二行
+  </div>
+</template>
+
+<script setup name="Part1" lang="ts">
+import Part2 from './Part2.vue';
+</script>
+
+<style>
+
+</style>

vue3/my_Module/src/components/slot2/Part2.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="part2">
+    <!-- 哈哈哈哈 -->
+    <slot name="s1">默认内容1</slot>
+    <slot name="s2">默认内容2</slot>
+    <slot>默认内容3</slot>
+  </div>
+</template>
+
+<script setup name="Part2" lang="ts">
+// import { defineProps } from "vue";
+
+</script>
+
+<style>
+
+</style>

vue3/my_Module/src/components/slot3/Part1.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="part1">
+    作用域
+    <Part2>
+      <template v-slot:main="{list,x}">
+      {{ x }}
+      <ul>
+        <li v-for="(item,index) in list" :key="index">
+          {{ item.name }} -- {{ item.hobby }}
+        </li>
+      </ul>
+      </template>
+    </Part2>
+    <!-- <slot></slot> -->
+    第二行
+  </div>
+</template>
+
+<script setup name="Part1" lang="ts">
+import Part2 from './Part2.vue';
+</script>
+
+<style>
+
+</style>

vue3/my_Module/src/components/slot3/Part2.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="part2">
+    <!-- 哈哈哈哈 -->
+    <slot>默认内容</slot>
+    <hr>
+    <slot name="main" :list="list" :x="10"></slot>
+  </div>
+</template>
+
+<script setup name="Part2" lang="ts">
+import {reactive} from 'vue';
+let list = [
+  {
+    id:"111",
+    name:"Lucy",
+    hobby:"篮球"
+  },
+  {
+    id:"222",
+    name:"LiLi",
+    hobby:"足球"
+  },
+  {
+    id:"333",
+    name:"Jerry",
+    hobby:"羽毛球"
+  }
+]
+
+</script>
+
+<style>
+
+</style>