compositionAPI之setup中触发父组件事件

在compositionAPI出现之前，子组件触发父组件方法可以直接用this.$emit(‘xxx’, a, b),使用了compositionAPI之后，setup中不能用this，子组件触发父组件方法需要在子组件中先注册事件，再在setup中用context来触发，具体实现如下：

父组件

<template>
    <div>
        <el-button @click="setCloseDialogVisible(true)">测试按钮</el-button>
        <CompositonTest :close-dialog="closeDialog" @CloseDialogVisible="setCloseDialogVisible" />
    </div>
</template>

<script>
import CompositonTest from '@views/top/manage/stayHungry/compositionTest';
export default {
    components: { CompositonTest },
    data() {
        return { closeDialog: false };
    },
    methods: {
        setCloseDialogVisible(flag) {
            this.closeDialog = flag;
            console.log('------我是父组件-----', flag);
        }
    }
};
</script>
复制代码

子组件

<template>
    <el-dialog
        class="close-confirm-dialog"
        :visible.sync="closeDialog"
        :close-on-click-modal="false"
        width="20%"
        center
    >
        <span class="closeText">{{ endText }}</span>
        <span slot="footer" class="dialog-footer">
            <button
                class="close-button-left"
                type="button"
                @click="setCloseDialogVisible(false)"
            >
                结束
            </button>
            <button
                class="close-button-right"
                type="button"
                @click="setCloseDialogVisible(false)"
            >
                取消
            </button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: 'CompositonTest',
    props: {
        closeDialog: {
            type: Boolean,
            default: false
        }
    },
    emits: ['setCloseDialogVisible'],
    setup(props, context) {
        const endText = '确认结束吗？';
        const setCloseDialogVisible = (flag) => {
            context.emit('CloseDialogVisible', flag);
        };
        return {
            endText,
            setCloseDialogVisible
        };
    }
};
</script>
复制代码