1、子组件调用父组件函数
子组件
<template>
<p>这是子组件</p>
<button @click="callParentFunc">调用父组件函数</button>
</template>
<script setup>
const emit = defineEmits(["parentFunc"]);
function callParentFunc() {
emit('parentFunc', 'arg1', 'arg2');
}
</script>
父组件
<template>
<p>这是父组件</p>
<childcomp @parentFunc="selfFunc"/>
</template>
<script setup>
import childcomp from './childcomp.vue';
function selfFunc(arg1, arg2) {
console.log(arg1);
console.log(arg2);
}
</script>
2、父组件调用子组件函数
子组件
<template>
<p>这是子组件</p>
</template>
<script setup>
function subCompFunc() {
console.log("subCompFunc is called!");
}
defineExpose({ subCompFunc });
</script>
父组件
<template>
<p>这是父组件</p>
<button @click="selfFunc">调用子组件函数</button>
<childcomp ref="childComp"/>
</template>
<script setup>
import { ref } from "vue";
import childcomp from './childcomp.vue';
const childComp = ref();
function selfFunc() {
childComp.value.subCompFunc();
}
</script>
