【Vue3.0实战逐步深入系列】vue3.0获取问卷调查结果并输出到控制台

本文链接：https://blog.csdn.net/lixiaosenlin/article/details/121473588

【千字长文，熬夜更新，原创不易，多多支持，感谢大家】

前言

hello，小伙伴们大家好。昨天我们对最初的投票功能做了一个简单的扩展：实现了一个简单的问卷调查功能。在实现该问卷功能时，我们分别封装了几个不同类型的组件：投票组件，单选组件，多选组件，输入组件和评分组件。不知有没有小伙伴发现，虽然问卷的大部分功能都实现了，问卷主题可自由配置，用户也可以进行点选输入填写问卷，但最后问卷填写完成后发现点击提交按钮并没有反应，那岂不是白操作了一顿？没错该问卷还少了个提交功能，接下来我们就把问卷的提交功能补齐，同时对App.vue组件进行一个简单的优化。

给自定义问卷组件添加change事件

在我们封装的问卷组件中不管是投票组件，多选组件，单选组件还是输入组件，最终选择的结果都是保存在一个响应式属性selectValue上，这个属性只能在组件内部使用，外部是无法访问到的，而我们的问卷最终是在父组件中通过提交按钮来提交问卷结果的，也就是说我们需要在父组件中来获取各个子组件已选择的结果，那么就需要用到子组件向父组件传值了，在本次分享中我们选择通过自定义事件的形式向父组件传值。除了投票组件，其它几个组件的代码基本上都是一样的，所以就在这里进行统一说明了，具体实现步骤如下：

在setup函数的第二个参数context中解构出emit方法

定义一个方法valChange，接收一个参数val，并在这个方法中调用emit方法，同时传递两个参数：【自定义事件“select”】和【已选结果值“val”】。注意这里我们给所有的自定义组件（包括投票组件）统一指定自定义事件select

通过return暴露valChange方法给模板

最后修改模板给组件添加change事件

下面以单选组件myradio为例，展示一下修改后的代码，其它几个组件（投票组件除外）与之相同，不再赘述

<!--...适用于myradio.vue, mycheck.vue, myinput.vue, mystar.vue-->
<template>
<!--...省略-->
	<el-radio-group v-model="selectedValue" @change="valChange">
	<!--...省略-->		
	</el-radio-group>
<!--...省略-->
</template>

//适用于myradio.vue, mycheck.vue, myinput.vue, mystar.vue
//...省略
setup(props, context){
   
	//...省略
	const {
   emit} = context;
	const valChange = () => {
   
		emit('select', val);//通过emit方法自定义select事件并将选择结果传递给父组件
	}
}
//...省略