vue3

16.vue3/project3/src/views/Attrs/Child.vue

@@ -3,7 +3,7 @@
     <h1 class="h-26 text-6xl">子组件</h1>
     <hr class="h-15" />
     <hr class="h-15" />
-    <GrandSon></GrandSon>
+    <GrandSon v-bind="$attrs"></GrandSon>
   </div>
 </template>
 

16.vue3/project3/src/views/Attrs/Father.vue

@@ -1,16 +1,29 @@
 <template>
   <div>
     <h1 class="h-26 text-6xl">Attrs</h1>
-    <h3 class="h-16 text-4xl"></h3>
+    <h3 class="h-16 text-4xl">我有{{ flower }}朵花</h3>
+    <button @click="sendMain">给出去一些花</button>
+
+    <h3 class="h-16 text-4xl">我收到了{{ main }}朵花</h3>
     <hr class="h-15" />
     <hr class="h-15" />
-    <Child></Child>
+    <Child :news="news" @back="changeMain"></Child>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, reactive } from "vue";
 import Child from "./Child.vue";
+let flower = ref(10);
+let news = ref(0);
+const sendMain = () => {
+  news.value += 1;
+  flower.value -= 1;
+};
+let main = ref(0);
+const changeMain = (val) => {
+  main.value += val;
+};
 </script>
 
 <style lang="scss" scoped>

16.vue3/project3/src/views/Attrs/GrandSon.vue

@@ -1,11 +1,19 @@
 <template>
   <div>
     <h1 class="h-26 text-6xl">孙组件</h1>
+    <h3 class="h-20 text-3xl">我收到了{{ news }}朵花</h3>
+    <button @click="handleClick">给Father组件一些值</button>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from "vue";
+import { ref } from "vue";
+let num = ref(0);
+defineProps(["news"]);
+const emits = defineEmits(["back"]);
+const handleClick = () => {
+  emits("back", 2);
+};
 </script>
 
 <style lang="scss" scoped>

16.vue3/project3/src/views/Provide-inject/Father.vue

@@ -1,7 +1,8 @@
 <template>
   <div>
     <h1 class="h-26 text-6xl">Attrs</h1>
-    <h3 class="h-16 text-4xl"></h3>
+    <h3 class="h-16 text-4xl">我有{{ flower }}朵花</h3>
+    <button @click="sendMain">给出去</button>
     <hr class="h-15" />
     <hr class="h-15" />
     <Child></Child>
@@ -9,8 +10,12 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from "vue";
+import { ref, provide } from "vue";
 import Child from "./Child.vue";
+let flower = ref(10);
+function sendMain() {
+  provide("xxx", flower);
+}
 </script>
 
 <style lang="scss" scoped>

16.vue3/project3/src/views/Provide-inject/GrandSon.vue

@@ -1,11 +1,17 @@
 <template>
   <div>
     <h1 class="h-26 text-6xl">孙组件</h1>
+    <button @click="showMain">展示</button>
+    <!-- <h1 class="h-26 text-6xl">展示:{{ x1 }}</h1> -->
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from "vue";
+import { ref, inject } from "vue";
+function showMain() {
+  let x1 = inject("x");
+  console.log(inject("xxxx"));
+}
 </script>
 
 <style lang="scss" scoped>

16.vue3/project3/src/views/slot1/Part1.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <h1 class="h-26 text-6xl">默认插槽</h1>
+    <h3 class="h-16 text-4xl"></h3>
+    <h3 class="h-16 text-4xl"></h3>
+    <hr class="h-15" />
+    <hr class="h-15" />
+    <Part2></Part2>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+import Part2 from "./Part2.vue";
+</script>
+
+<style lang="scss" scoped>
+</style>

16.vue3/project3/src/views/slot1/Part2.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h1 class="h-26 text-6xl">Part2</h1>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+</script>
+
+<style lang="scss" scoped>
+</style>

16.vue3/project3/src/views/slot2/Part1.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <h1 class="h-26 text-6xl">具名插槽</h1>
+    <h3 class="h-16 text-4xl"></h3>
+    <h3 class="h-16 text-4xl"></h3>
+    <hr class="h-15" />
+    <hr class="h-15" />
+    <Part2></Part2>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+import Part2 from "./Part2.vue";
+</script>
+
+<style lang="scss" scoped>
+</style>

16.vue3/project3/src/views/slot2/Part2.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h1 class="h-26 text-6xl">Part2</h1>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+</script>
+
+<style lang="scss" scoped>
+</style>

16.vue3/project3/src/views/slot3/Part1.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <h1 class="h-26 text-6xl">作用域插槽</h1>
+    <h3 class="h-16 text-4xl"></h3>
+    <h3 class="h-16 text-4xl"></h3>
+    <hr class="h-15" />
+    <hr class="h-15" />
+    <Part2></Part2>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+import Part2 from "./Part2.vue";
+</script>
+
+<style lang="scss" scoped>
+</style>

16.vue3/project3/src/views/slot3/Part2.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h1 class="h-26 text-6xl">Part2</h1>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+</script>
+
+<style lang="scss" scoped>
+</style>