Bootstrap

vue3 父组件调用子组件里的事件方法

父组件
<ChildVue ref="childRef" />  父组件调用子组件的时候设置ref值。
const childRef = ref();vue3可以通过ref方法获取
childRef.value.方法名()   使用

子组件
const foo = () => {
  console.log("foo");
}
defineExpose({
  foo
});

子获取父

第一种

子组件
import { defineEmit } from 'vue'  
// 定义派发事件
const emit = defineEmit(['myclick'])

父组件
 <HelloWorld @myclick="onmyclick"/>
//导入子组件
import HelloWorld from './components/HelloWorld.vue'; 
 
//子组件使用使用父组件函数
const onmyclick = () => {
  console.log(" Come from HelloWorld! ");
} 

第二种  获取上下文对象

子
import { useContext } from 'vue' 
 
// 获取上下文
const ctx = useContext(); 
const emitclick = () => { 
  ctx.emit('myclick');
} 

父
 <HelloWorld @myclick="onmyclick"/>
import HelloWorld from './components/HelloWorld.vue';
 
const onmyclick = () => {
  console.log(" Come from HelloWorld! ");
}

;