vue3

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

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h1 class="h-26 text-6xl">子组件</h1>
+    <hr class="h-15" />
+    <hr class="h-15" />
+    <GrandSon></GrandSon>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+import GrandSon from "./GrandSon.vue";
+</script>
+
+<style lang="scss" scoped>
+</style>

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

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

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

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

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

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h1 class="h-26 text-6xl">子组件</h1>
+    <hr class="h-15" />
+    <hr class="h-15" />
+    <GrandSon></GrandSon>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+import GrandSon from "./GrandSon.vue";
+</script>
+
+<style lang="scss" scoped>
+</style>

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

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

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

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

16.vue3/project3/src/views/Refs-Parent/Child1.vue

@@ -1,11 +1,21 @@
 <template>
   <div>
     <h1 class="h-26 text-6xl">子组件1</h1>
+    <h3 class="h-16 text-4xl">我有{{ toy }}个玩具</h3>
+    <h3 class="h-16 text-4xl">我有{{ money }}压岁钱</h3>
+    <button @click="getMain($parent)">获取父组件的车辆:{{ news }}</button>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, reactive } from "vue";
+let toy = ref(50);
+let money = ref(700);
+let news = ref(0);
+const getMain = (val: any) => {
+  news.value = val.car;
+};
+defineExpose({ toy, money });
 </script>
 
 <style lang="scss" scoped>

16.vue3/project3/src/views/Refs-Parent/Child2.vue

@@ -1,11 +1,16 @@
 <template>
   <div>
     <h1 class="h-26 text-6xl">子组件2</h1>
+    <h3 class="h-16 text-4xl">我有{{ book }}本书</h3>
+    <h3 class="h-16 text-4xl">我有{{ money }}压岁钱</h3>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, reactive } from "vue";
+let book = ref(100);
+let money = ref(500);
+defineExpose({ book, money });
 </script>
 
 <style lang="scss" scoped>

16.vue3/project3/src/views/Refs-Parent/Father.vue

@@ -1,15 +1,17 @@
 <template>
   <div>
-    <h1 class="h-26 text-6xl">Refs-Parent</h1>
-    <h3 class="h-16 text-4xl"></h3>
+    <h1 class="h-26 text-6xl">$refs-$parent</h1>
+    <h3 class="h-16 text-4xl">我有{{ car }}辆车</h3>
+    <button @click="getMain">获取</button>
+    <button @click="changeMain($refs)">改变</button>
     <hr class="h-15" />
     <hr class="h-15" />
     <hr class="h-15" />
-    <Child1></Child1>
+    <Child1 ref="c1"></Child1>
     <hr class="h-15" />
     <hr class="h-15" />
     <hr class="h-15" />
-    <Child2></Child2>
+    <Child2 ref="c2"></Child2>
   </div>
 </template>
 
@@ -17,6 +19,21 @@
 import { ref, reactive } from "vue";
 import Child1 from "./Child1.vue";
 import Child2 from "./Child2.vue";
+let car = ref(10);
+let c1 = ref();
+let c2 = ref();
+function getMain() {
+  c1.value.money -= 100;
+  c2.value.money -= 100;
+  console.log(c1.value, "c1");
+  console.log(c2.value, "c2");
+}
+const changeMain = (val: { [propsName: string]: any }) => {
+  for (let key in val) {
+    val[key].money += 100;
+  }
+};
+defineExpose({ car });
 </script>
 
 <style lang="scss" scoped>