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,
});