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

组件调用子组件里的事件方法"/>

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! ");
}