vue3 组件传参

 父传子

:checkedCities="checkedCities"

子接收

const props = defineProps({checkedCities: {type: Array,default: [],}
});

当父组件想要执行子组件方法的时候需要暴漏变量 

// 暴露变量 defineExpose({ openDialogReceivingUni, });

子取值：props.checkedCities

子传父

const emit = defineEmits(['Confirmreceive'])

emit('Confirmreceive',listClick.value);

完整代码：

父

<template>
<el-button @click="receivingUnitRef.openDialogReceivingUni()" icon="Plus"/>
<ReceivingUnit ref="receivingUnitRef" :checkedCities="checkedCities" @Confirmreceive="Confirmreceive"></ReceivingUnit></template><script setup lang="ts" name="systemPostDialog">
//引入组件
const ReceivingUnit = defineAsyncComponent(() => import('/@/components/receivingUnit/index.vue'));
//生明变量
const receivingUnitRef = ref()
const checkedCities = ref();const Confirmreceive = (list) => {//子组件返回的数据 list
};</script>

子

<template><el-dialog:append-to-body="true"title=""width="750"v-model="dialogVisiblereceive"draggable>
//弹窗内容<el-button type="primary" @click="Confirm"> 确认</el-button></el-dialog>
</template>
<script lang="ts" name="historicalRecord" setup>
import {getAllOneLineDept} from "/@/api/operationMonitoring/operationalInformation";
const props = defineProps({checkedCities: { //父组件给的数据type: Array,default: [],}
});
const emit = defineEmits(['Confirmreceive'])const openDialogReceivingUni = () => {//父组件执行子组件方法//打开弹窗
};const Confirm = (newPage) => {emit('Confirmreceive','111'); //子组件给父组件传参
}
// 暴露变量
defineExpose({openDialogReceivingUni,
});