vue在已有传参的基础上加上一个参数

js在已有传参的基础上加上一个参数

1.需求：

抽离了一个公用的组件需要回调一个布尔值

<template>
    <div>
        <el-switch
            v-model="valueBoolen"
            @change="changeStatus($event, valueBoolen)"
        >
        </el-switch>
    </div>
</template>
<script>
export default {
    name: 'TrsSwitch',
    props: {
        valueProp: {
            type: String,
            default: '',
        },
        activeStatus: {
            type: String,
            default: '0',
        },
        inactiveStatus: {
            type: String,
            default: '-1',
        },
    },
    data() {
        return {
            valueBoolen: true,
        };
    },
    watch: {
        // valueProp: function(val) {

        // },
    },
    activated() {
    },
    created() {
    },
    mounted() {
        if (this.valueProp === this.activeStatus) {
            this.valueBoolen = true;
        } else {
            this.valueBoolen = false;
        }
    },
    methods: {
        changeStatus(callback) {
            console.log(callback, '11111');
            let text = '';
            if (callback === true) {
                text = '启用';
                // row.RELSTATUS = '1';
            } else {
                text = '关闭';
                // row.RELSTATUS = '0';
            }
            this.$confirm(`确认${text}该产品？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(async() => {
                this.$emit('callback', callback);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    showClose: true,
                    message: `已取消${text}`,
                });
            });
        },
    },

};
</script>

但是在父组件调用的时候要把表格的本行一些信息作为接口的参数，所以要在callback传出的布尔值基础之上，添加一个对象

解决办法：

父组件使用$event收纳参数

<template>
    <div>
<el-table>
   <el-table-column label="状态" align="center">
                <template slot-scope="scope">
                    <trs-switch :value-prop="scope.row.STATUS" 				   
                    @callback="cahngeStatus($event,scope.row)"></trs-switch>
                    <!-- <span>{{scope.row.STATUS}}</span> -->
                </template>
            </el-table-column>
</el-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
        };
    },
    mounted() {
        this.initData();
    },
    methods: {
        cahngeStatus(status, row) {
            console.log(status, row);
            const params = {
                MediaType: row.type,
                ProductIds: '730',
                isEnable: status,
         
            };
            this.$axios.get('***********', { params: params }).then(res => {
                console.log(res);
            });
        },
    },
};
</script>

触发callback的输出