vue3

vue3/my_Module/src/App.vue

@@ -1,15 +1,19 @@
 <template>
   <div class="app">
     <h1>组件通信</h1>
+    <Provide></Provide>
+    <!-- <Parent></Parent> -->
     <!-- <Props /> -->
     <!-- <Event></Event> -->
     <!-- <MittEvent/> -->
-    <Attrs/>
+    <!-- <Attrs/> -->
   </div>
 </template>
 
 <script setup lang="ts" name="App">
-import Attrs from './components/$attrs/GrandFather.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'
 // import Event from './components/custom-event/Father.vue'
 // import Props from './components/Props/Father.vue'

vue3/my_Module/src/components/$parent-$refs/Child.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="Child">
+    <h1>子组件1</h1>
+    <h3>我有{{toy}}个奥特曼</h3>
+    <h2>我有{{money}}块钱</h2>
+    <button @click="changeNum($parent)">修改粽子数量</button>
+  </div>
+</template>
+
+<script setup lang="ts" name="Child5">
+  import {ref, defineExpose} from 'vue';
+  let toy = ref(10);
+  let money = ref(100);
+  function changeNum(par) {
+    console.log(par)
+    par.num += 1;
+  }
+  defineExpose({toy,money});
+</script>
+
+<style scoped>
+.Child {
+  width: 400px;
+  height: 400px;
+  background: plum;
+}
+</style>

vue3/my_Module/src/components/$parent-$refs/Child1.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="Child">
+    <h1>子组件2</h1>
+    <h3>我有{{sheep}}只喜羊羊</h3>
+    <h2>我有{{money}}块钱</h2>
+  </div>
+</template>
+
+<script setup lang="ts" name="Child5">
+  import {ref, defineExpose} from 'vue';
+  let sheep = ref(8);
+  let money = ref(100);
+  defineExpose({sheep, money});
+</script>
+
+<style scoped>
+.Child {
+  width: 400px;
+  height: 400px;
+  background: plum;
+}
+</style>

vue3/my_Module/src/components/$parent-$refs/Father.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="father">
+    <h1>父组件</h1>
+    <h4>我有{{num}}个粽子</h4>
+    <button @click="change1">修改奥特曼数量</button>
+    <br><br>
+    <button @click="change2">修改喜羊羊数量</button>
+    <br><br>
+    <button @click="change3($refs)">修改钱数</button>
+    <Child ref="c1"></Child>
+    <hr>
+    <Child1 ref="c2"></Child1>
+  </div>
+</template>
+
+<script setup lang="ts" name="Father5">
+import Child from './Child.vue';
+import Child1 from './Child1.vue';
+import {ref, defineExpose} from 'vue';
+let num = ref(10);
+let c1 = ref("");
+let c2 = ref("");
+function change1() {
+  console.log(c1.value.toy);
+  c1.value.toy += 1;
+}
+function change2() {
+  c2.value.sheep += 1;
+}
+function change3($refs:{[key:string]:any}) {
+  console.log($refs)
+  // console.log(key,'key')
+  for(let a in $refs) {
+    console.log($refs[a]);
+    $refs[a].money += 100;
+  }
+}
+defineExpose({num});
+</script>
+
+<style scoped>
+    .father {
+        width: 1200px;
+        height: 1200px;
+        background: aqua;
+    }
+</style>

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

@@ -0,0 +1,18 @@
+<template>
+  <div class="child6">
+    <h2>子组件</h2>
+    <GrandSon></GrandSon>
+  </div>
+</template>
+
+<script setup lang="ts" name="child6">
+import GrandSon from './GrandSon.vue';
+</script>
+
+<style scoped>
+.child6 {
+    width: 400px;
+    height: 400px;
+    background: pink;
+}
+</style>

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

@@ -0,0 +1,35 @@
+<template>
+  <div class="father6">
+    <h2>父组件</h2>
+    <h3>我有{{money}}块钱</h3>
+    <h3>
+        <p>我有一辆{{car.brand}}</p>
+        <p>价值{{car.price}}万</p>
+    </h3>
+    <Child></Child>
+  </div>
+</template>
+
+<script setup lang="ts" name="Father6">
+import Child from './Child.vue';
+import {ref,reactive,provide} from 'vue';
+let money = ref();
+let car = reactive({
+    brand:"比亚迪",
+    price:10
+})
+function updateMoney() {
+    money.value = money.value + 1;
+}
+// 向后代提供数据
+provide('moneyContent',{money,updateMoney});
+provide('car',car);
+</script>
+
+<style scoped>
+.father6 {
+    width: 800px;
+    height: 800px;
+    background: aquamarine;
+}
+</style>

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

@@ -0,0 +1,28 @@
+<template>
+  <div class="GrandSon">
+    <h2>孙组件</h2>
+    <h2>我爷爷有多少钱：{{money}}块钱</h2>
+    <button @click="changeMoney">修改钱数</button>
+    <p>
+      我的爷爷有辆{{car.brand}},价值{{car.price}}万元
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts" name="GrandSon">
+import {inject} from 'vue';
+let {money,updateMoney} = inject("moneyContent");
+let car = inject("car");
+console.log(car);
+function changeMoney() {
+  updateMoney();
+}
+</script>
+
+<style scoped>
+.GrandSon {
+    width: 200px;
+    height: 200px;
+    background: red;
+}
+</style>