父组件与子组件ref通信

子组件

<template>
  <div class="config-wrapper">
    <n-modal v-model:show="showModal">
      <n-card style="width: 600px" title="自愿" :bordered="false" size="huge" role="dialog" aria-modal="true">
        <template #header-extra> 按需 </template>
        原则
        <template #footer> 支持一下 </template>
      </n-card>
    </n-modal>
  </div>
</template>

<script setup>
import { ref, defineExpose } from 'vue';
import { NModal, NCard } from 'naive-ui';
let showModal = ref(false);
const openModal = () => {
  showModal.value = true;
};
defineExpose({
  openModal,
});
</script>

<style lang="scss" scoped></style>

通过defineExpose暴露子组件方法

父组件

<template>
  <div class="header-wrapper">
    <configModal ref="configModalIns"></configModal>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import configModal from './configModal.vue';
const configModalIns = ref(null);

function openConfig() {
  configModalIns.value.openModal();
}
</script>

Props使用

子组件定义props

import { defineProps } from 'vue';
defineProps({
  title: String,
});

父组件直接使用