child.vue emit

Author: renl

src/App.vue

@@ -5,14 +5,26 @@
     <p v-for="v in 3" :key="v">{{v}}</p>
     <h4 ref="h4">{{num}}</h4>
     <button @click="inc">Clicked {{ count }} times.</button>
+    <Child @childEvent="childEvent"/>
   </div>
 </template>
 
 <script>
 import { ref, onBeforeMount, watch, watchEffect, reactive, onMounted } from 'vue'
+import Child from './compents/Child.vue'
 
 export default {
-  setup() {
+  components: {
+    Child
+  },
+  emits: {
+    childEvent (val) {
+      console.log(val)
+      return true
+    }
+  },
+  setup(props, context) {
+    console.log(context)
     const count = ref(0)
     const num = ref(1)
     const datas = reactive({
@@ -32,6 +44,11 @@ export default {
     }
     const h4 = ref(null)
 
+    const childEvent = (val) => {
+      console.log(val)
+      return true
+    }
+
     onBeforeMount(() => {
       initTem()
       initEnd()
@@ -55,6 +72,7 @@ export default {
       count,
       num,
       h4,
+      childEvent,
       inc
     }
   }

src/compents/Child.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>this is child</div>
+</template>
+<script>
+export default {
+  setup (props, context) {
+    context.emit('childEvent', '孩子from child')
+    return {}
+  }
+}
+</script>
+<style lang="less" scoped>
+</style>