vue组件通信

20.vue3/project3/src/views/Custom/Father.vue

@@ -1,11 +1,28 @@
 <template>
   <div>
-    <h1>Custom</h1>
+    <h1 class="h-26 text-6xl">Custom</h1>
+    <h3 class="h-16 text-4xl">孩子给了我{{ num }}瓶酒</h3>
+    <h3 class="h-16 text-4xl"></h3>
+    <hr class="h-15" />
+    <hr class="h-15" />
+    <hr class="h-15" />
+    <!-- 
+    自定义事件：
+      子 -> 父
+      父组件中定义:事件的名称是任意的
+      子组件中接受:需要通过defineEmits接受 进行触发
+    -->
+    <Child @send-wine="getWine"></Child>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, reactive } from "vue";
+import Child from "./index.vue";
+let num = ref(0);
+const getWine = () => {
+  num.value += 1;
+};
 </script>
 
 <style lang="scss" scoped>

20.vue3/project3/src/views/Custom/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <h1 class="h-26 text-6xl">子组件</h1>
+    <button @click="emits('send-wine')">触发</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+const emits = defineEmits("send-wine");
+</script>
+
+<style lang="scss" scoped>
+</style>

20.vue3/project3/src/views/mitt/Father.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h1 class="h-26 text-6xl">Mitt</h1>
+    <h3 class="h-16 text-4xl"></h3>
+    <h3 class="h-16 text-4xl"></h3>
+    <hr class="h-15" />
+    <hr class="h-15" />
+    <hr class="h-15" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style lang="scss" scoped>
+</style>