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>