组件通信

12.vue3/project3/src/views/Custom/Child.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h1>Child</h1>
+    <h3>我有{{ num }}玩具</h3>
+    <button @click="emits('news')">给父组件一个玩具</button>
+  </div>
+</template>
+
+<script setup>
+import {ref,reactive} from "vue";
+let num = ref(10);
+const emits = defineEmits('news')
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -1,10 +1,20 @@
 <template>
   <div>
     <h1>Custom</h1>
+    <h3>孩子给了我{{ init }}个玩具</h3>
+    <hr>
+    <hr>
+    <hr>
+    <Child @news="changeInit"></Child>
   </div>
 </template>
 
 <script setup>
 import { ref, reactive } from "vue";
+import Child from "./Child.vue";
+let init = ref(0);
+function changeInit() {
+  init.value++;
+}
 </script>
 <style lang="scss" scoped></style>