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