vue3.0中 在子组件中触发父组件中的函数

新手学习：

vue3.0中  在子组件中触发父组件中的函数的技巧目前有两个：

技巧一：在script中引入 defineEmit 后，import { defineEmit } from 'vue' ；通过defineEmit定义事件，例如：const emit = defineEmit(['myclick']); 定义了 myclick 事件，并且返回了一个函数，在点击事件里通过emit("myclick") 传递出事件，在父组件中的 引用的子组件的标签上定义上要传递的事件，具体代码如下：

子组件：

<template>
  <h1>{{ msg }}</h1>
  <com></com> 
  <button @click="emitclick">emitclick</button>
</template>

<script setup>
// 1,直接导入组件
import com from "./com.vue";
import { defineProps, reactive, defineEmit, useContext } from 'vue'  
// 4，定义事件
const emit = defineEmit(['myclick']);
const emitclick = () => {
  emit('myclick'); 
} 
</script> 
<style scoped> </style>

父组件：

<template> 
  <HelloWorld msg="Hello Vue 3 + Vite" @myclick="onmyclick"/>
</template> 
<script setup>
import HelloWorld from './components/HelloWorld.vue'; 
const onmyclick = () => {
  console.log("子组件helloword让我显示的");
} 
</script> 
<style> 
</style>

技巧二：先获取上下文对象，通过该对象的emit()方法进行事件的传出，其他同上;

子组件：

<template>  
  <button @click="emitclick">emitclick</button>
</template>

<script setup> 
import { defineProps, reactive, defineEmit, useContext } from 'vue' 
//3， 获取上下文
const ctx = useContext(); 
const emitclick = () => { 
  ctx.emit('myclick');
} 
</script> 
<style scoped> 
</style>

父组件：

<template> 
  <HelloWorld msg="Hello Vue 3 + Vite" @myclick="onmyclick"/>
</template> 
<script setup>
import HelloWorld from './components/HelloWorld.vue';

const onmyclick = () => {
  console.log("子组件helloword让我显示的");
} 
</script> 
<style> </style>