共计 2091 个字符,预计需要花费 6 分钟才能阅读完成。
以下将依据理论业务场景进行剖析,梳理 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>
咱们的子组件大略长这样子:
以上是一个简略的父子通信的示例,心愿对你有帮忙。
正文完
发表至: javascript
2022-11-18