vue3.0+ts项目中的组件通讯

以下将根据实际业务场景进行分析，梳理vue3.0+ts项目中的父子组件通讯。

一、父组件

我们假定我们有一个这样的父组件Parent.vue，在我们点击编辑按钮之后弹出我们的子组件弹窗Model.vue。在使用子组件时，我们使用了双向绑定visible、参数rowInfo、以及更新方法getSystemList，接下来我们看下在子组件中我们怎么做来保持与父组件的通讯。

<template>
  <a class="ant-btn-link" @click="edit(record)">编辑</a>
  <system-modal v-model:visible="showAdd" :rowInfo="rowInfo"
    @getSystemList="getSystemList"></system-modal>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import SystemModal from './modal.vue'
const showAdd = ref(false)
type rowInfoKeys =
  | 'isOther'
  | 'appOnlyId'
  | 'backAddress'
  | 'connectGateway'
  | 'secretGateway'
  | 'zeroTrustGateway'
type rowInfoType = Partial<Record<rowInfoKeys, any>>
const rowInfo: { value: rowInfoType } = ref({
  appOnlyId: '',
  backAddress: '',
  connectGateway: [],
  secretGateway: false,
  zeroTrustGateway: false,
})
const edit = (row: any): void => {
  rowInfo.value = { ...row }
  showAdd.value = true
}
//数据更新
const getSystemList = () => {
    //在这里编写你的数据更新代码
}
</script>

我们的父组件大概长这个样子：

二、子组件

首先我们先来接收到来自父组件的参数visible、rowInfo并保存至对象props中，那么后续我们就可以在子组件中使用到props中的数据了。接下来我们定义（defineEmits）更新事件：
1、'update:visible' 在弹窗关闭时，同步告知父组件更新visible的值。
2、'getSystemList' 当我们在弹窗内操作了form表单准备保存数据，点击确认时，将告知父组件进行更新数据。

<template>
  <a-modal title="编辑" v-model:visible="visible" @cancel="close" :maskClosable="false">
    <!-- v-model="showAdd" -->
    <template #footer>
      <div class="textAlignCenter">
        <a-button type="dashed" size="mini" @click="close">取消</a-button>
        <a-button type="primary" size="mini" @click="confirmSave">
          确认
        </a-button>
      </div>
    </template>
    <div>
      <a-form ref="formRef" :labelCol="{ style: { width: '150px' } }" :model="props.rowInfo" required
        autocomplete="off">
        <a-form-item label="名称：">
          {{props.rowInfo.appName}}
        </a-form-item>
        <--这里可能还有别的表单元素（你的业务场景）-->
      </a-form>
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
import { message, Modal } from 'ant-design-vue'
import { ref, onMounted, Ref } from 'vue'
interface Props {
  visible?: boolean
  rowInfo?: any
}
const props = withDefaults(defineProps<Props>(), {
  visible: false,
  rowInfo: {},
})
const emit = defineEmits(['update:visible', 'getSystemList'])
const close = function () {
  emit('update:visible', false)
  selectOpen.value = false
}
const confirmSave = () => {
    //这里可能会有很多校验,通过之后告知父组件更新数据。
    emit('getSystemList')
}
</script>

我们的子组件大概长这样子：

以上是一个简单的父子通讯的示例，希望对你有帮助。