vue组件通信

20.vue3/project3/src/router/index.ts

@@ -24,6 +24,16 @@ const router = createRouter({
       name: 'Custom',
       component: () => import('../views/Custom/Father.vue'),
     },
+    {
+      path: '/attrs',
+      name: 'Attrs',
+      component: () => import('../views/Attrs/Father.vue'),
+    },
+    {
+      path: '/provide',
+      name: 'Provide',
+      component: () => import('../views/Provide-inject/Father.vue'),
+    },
   ],
 })
 

20.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>

20.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>
+    <h3 class="h-16 text-4xl"></h3>
+    <hr class="h-15" />
+    <hr class="h-15" />
+    <Child></Child>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Child from "./Child.vue";
+</script>
+
+<style lang="scss" scoped>
+</style>

20.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>

20.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>

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

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

20.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>

20.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">我有{{ book }}本书</h3>
+    <h3 class="h-16 text-4xl">我有{{ money }}元</h3>
+    <button @click="getCar($parent)">获取父组件的车辆</button>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, reactive } from "vue";
+let book = ref(10);
+let money = ref(10000);
+const getCar = (val) => {
+  console.log(val);
+  val.num -= 1;
+};
+defineExpose({ book, money });
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,11 +1,15 @@
 <template>
   <div>
     <h1 class="h-26 text-6xl">子组件2</h1>
+    <h3 class="h-16 text-4xl">我有{{ money }}元</h3>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, reactive } from "vue";
+let flower = ref(20);
+let money = ref(20000);
+defineExpose({ flower, money });
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,20 +1,44 @@
 <template>
   <div>
-    <h1 class="h-26 text-6xl">Refs-Parent</h1>
+    <h1 class="h-26 text-6xl">$refs-$parent</h1>
+    <p>我有{{ num }}辆车</p>
+    <button @click="changeBook">修改书本数量</button>
+    <hr class="h-15" />
+    <button @click="changeFlower">修改花朵数量</button>
+    <hr class="h-15" />
+    <button @click="changeMoney($refs)">同时修改</button>
     <h3 class="h-16 text-4xl"></h3>
     <h3 class="h-16 text-4xl"></h3>
     <hr class="h-15" />
     <hr class="h-15" />
-    <Child1></Child1>
+    <Child1 ref="a1"></Child1>
     <hr class="h-15" />
     <hr class="h-15" />
-    <Child2></Child2>
+    <Child2 ref="a2"></Child2>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
 import Child1 from "./Child1.vue";
 import Child2 from "./Child2.vue";
+let a1 = ref();
+let a2 = ref();
+let num = ref(10);
+// console.log(a1, "a1");
+function changeBook() {
+  a1.value.book += 1;
+}
+function changeFlower() {
+  a2.value.flower += 2;
+}
+function changeMoney(val: { [propsName: string]: any }) {
+  console.log(val);
+  for (let key in val) {
+    val[key].money -= 1000;
+  }
+}
+defineExpose({ num });
 </script>
 
 <style lang="scss" scoped>