vue子组件向父组件传值

子组件向父组件传值

描述需求

子组件点确定按钮的时候需要带一个对象到父组件页面

子组件代码

<template>
    <div class="add_channels">
        <el-dialog title="选择渠道" :visible.sync="visible" @close="$emit('update:show', false)">
            <div>
                <el-table :data="dataSource" @selection-change="selectionChange">
                    <el-table-column type="selection" align="center"></el-table-column>
                    <el-table-column property="name" label="渠道名称" align="center"></el-table-column>
                </el-table>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="text" @click="visible=false">取 消</el-button>
                <el-button type="primary" @click="setChannel()">添加</el-button>//这里是子组件添加的方法
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import ApiSetting from "@/api"
    export default {
        props: {
            show: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                showArray:[],//定义一个数组
                dynamicTags1: [],
                currentPage4: 4,
            }
        },
        methods: {
            selectionChange(val) { //代理人选中的列表
                var dynamicTags1 = [];
                var arr = []
                for(var i = 0; i < val.length; i++) {
                    var item = {};//定义一个空对象
                    item['id'] = val[i].id;//对象里添加属性
                    item['name'] = val[i].name;//对象里添加属性
                    dynamicTags1.push(item);//将对象追加到数组里。。。。
                    this.showArray = dynamicTags1;
                }
            },
            setChannel() {
                this.visible = false;
                this.$emit('transferChannel',this.showArray)//子组件通知父组件更新。前面的是：父组件调用子组件的方法名，后面的是：要传过去的对象
            },
        }
    }
</script>

父组件代码

<template>
    <div class="task_list">
        <!--选择渠道-->
        <choose-channel :show.sync="dialogChannelVisible" @transferChannel="getChannel"></choose-channel>//这里是调用子组件的地方
    </div>
</template>

<script>
    import ApiSetting from "@/api"
    import chooseChannel from '../common/choose_channel.vue'
    export default {
        components: {
            addPerson,
            chooseChannel
        },
        data() {
            return {
                loading: true,
                dynamicTags: [], //代理人的选择器
                dynamicTag: [], //渠道的选择器
                taskName: '', //任务名称
                userList: [],
            }
        },
        created() {
            let param = {
                bone: '任务晋升管理',
                btwo: '任务管理',
                btwoUrl: '/task_promote/task',
            }
            this.$store.dispatch('switchBreadcrumb', param)
            this.getList();
            this.gettasktemplateList();

        },
        methods: {
            getChannel(msg) {//////////////////父组件拿值的地方
                this.dynamicTag = msg;
            },
            distribution() { //立即分配的提交
                var agentArray = this.dynamicTags;
                var channelArray = this.dynamicTag;
                //整合渠道代理人的数组对象
                var arr = [];
                for(var i = 0; i < agentArray.length; i++) {
                    var item = {};
                    item['userId'] = agentArray[i].id;
                    item['userType'] = 2;
                    arr.push(item);
                }
                for(var i = 0; i < channelArray.length; i++) {
                    var item = {};
                    item['userId'] = channelArray[i].id;
                    item['userType'] = 1;
                    arr.push(item);
                }
                this.userList = arr;
                let params = {
                    "taskTemplateId": this.form.taskTemplateId,
                    "cycleType": this.form.cycleType,
                    "name": this.taskName,
                    "startTime": this.daterange[0],
                    "endTime": this.daterange[1],
                    "userList": this.userList
                }
                this.$http(ApiSetting.tasklist_dispatch, params)
                    .then((res) => {
                        if(res.data.code == 200) {
                            this.dialogTaskVisible = false;
                            this.getList();
                        }
                    }).catch(err => {})
            },
            taskResult: function(id) {
                this.$router.push({
                    path: '/task_promote/result',   //路由跳转传参
                    query: {
                        id: id
                    }
                })
            }
        }
    }
</script>

转载于:https://www.cnblogs.com/lml-lml/p/9089601.html