vue3-子组件调用父组件-父组件调用子组件-setup语法糖
1、父组件调用子组件函数
父组件调用子组件的函数和方法主要通过defineExpose来实现。
//父组件 <template> <childComponent ref="childRef"></childComponent> </template> <script setup> import childComponent from './components/childComponent.vue' const childRef = ref() childRef.value.clickChild() </script>
子组件通过defineExpose暴露
//子组件
<template>
<div @click="clickChild"><div>
</template>
<script setup>
import {defineExpose} from 'vue'
defineExpose({ clickChild })
function clickChild(){
console.log('hello child'）
}
</script>2、子组件调用父组件函数
父组件通过定义函数以及将函数通过@属性=“函数”，将函数传入子组件中
//父组件
<template>
<childComponent ref="childRef" @callParent="getData"></childComponent>
</template>
<script setup>
import childComponent from './components/childComponent.vue'
function getData(){
console.log('hello parent')
}
</script>在子组件中，通过defineEmits来接受父组件绑定在子组件的属性名，即为refresh，再通过emit来调用函数，defineEmits可用与函数数组，即传入多个函数。
//子组件
<template>
<div @click="clickChild"><div>
</template>
<script setup>
import {defineEmits} from 'vue'
const emit = defineEmits(['callParent'])
function clickChild(){
emit('callParent')
}
</script>
