vue3 父传子 子传父

父传子 props接收数据

emit :子组件想使用父组件的方法 

setup( props, { emit } ){  }

index.vue（父组件）

<CommonDialog
v-if="visible"
:visible.sync="visible"
:diff-type="diffType"
:detail-row="detailRow"
@reload="handleSearch"
/>     
<script>

import CommonDialog from './commonDialog.vue';

export default {
  name: 'Index',
  components: {
    CommonDialog,
  },
  setup() {
    const handleSearch = () => {
      $refs.table.reload();
    };
}

commonDialog.vue 子组件

props.detailRow 去接收值 

export default {
  props: {
    detailRow: {
      type: Object,
      default: null,
    },
    visible: {
      type: Boolean,
      default: false,
    },
    diffType: {
      type: String,
      default: '',
    },
  },
  setup(props, { emit }) {
    const handleSave = async() => {
        emit('reload');//接收
        handleCancel();
    };
    const handleCancel = () => {
      emit('update:visible', false);
    };
    
    return {
      handleSave,
      handleCancel
    };
  },
};
</script>