关于vue3.2中父组件调用子组件的方法

我们都知道在vue2中父子组件传值直接在父组件调用子组件的元素上添加相应的属性，然后再在子组件中的props中调用父组件传过来的值即可。

但是在vue3中略有不同，添加了两个新Api defineProps、defineExpose

1、首先在父组件中引入并且调用子组件，这里需要注意一下，在vue3中不需要再在components对象中定义组件，直接引入之后直接使用就可以了

// 父组件
// 引入组件
<script setup>
import DialogAddSwiper from '@/components/DialogAddSwiper.vue'
</script>

<template>
<DialogAddSwiper ref="addGood" :reload="getCarousels" :type="state.type" />
</template>

2、然后在子组件中接收父组件传过来的值

// 子组件
<script setup>
// defineProps 方法的使用
const props = defineProps({
  type: String,
  reload: Function,
  configType: Number
});
</script>

至此，父组件调用子组件的值是没有问题了，但是却无法使用子组件中定义的方法，这时候就需要在子组件中引入一个Api
比如在父组件中使用一个子组件的方法

// 父组件
// 定义了一个addGood 实例
const addGood = ref(null);

// 这里使用了addGood 的open方法，但是这样直接使用是没法使用的
const handleAdd = () => {
    state.type = "add";
    addGood.value.open();
}

// 这时候就需要在子组件中暴露出open这个方法来供父组件使用
// 子组件
// 定义了 open 方法
const open = (id) => {
    state.visible = true
    console.log(id, '到底有没有获取到');
    if(id) {
        state.id = id
        getDetail(id)
    } else {
        state.ruleForm = {
            name: '',
            id: '',
            link: '',
            sort: ''
        }
    }
}

// 然后需要在 defineExpose 这个函数中将这个open方法暴露出去供父组件调用
defineExpose({ open });

至此，父组件就传值给了子组件并且也成功的调用了子组件的方法。