iview的api踩坑之events,props和返回值

本文链接：https://blog.youkuaiyun.com/weixin_46934884/article/details/106140627

本文介绍了在使用IVIEW组件时遇到的事件绑定问题，特别是on-select与@select的区别，强调在Vue中简写的事件如@change对应于onchange。在处理on-click事件时，需要使用@on-click来正确触发并获取返回值。当尝试传递多个参数时遇到了困难，作者分享了自己的探索过程，并希望得到社区的帮助。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件之间有父子的组织关系的话，要看清api的触发主体

一般有父子组织的话，触发的事件，会放在父组件上，但是触发会由子组件触发
如果带有返回值的话，一般返回的是子组件的某个值

官网说的on-select并不等于onselect/@select

vue中onchange和onkeydown等都是可以简写成@change的

但是iview特意表明了一个on-click，这种连字符写法的event，是特殊了，我一开始以为就是普通的onclick，发现并无法获取到返回值，试了@click，也无法获取到。
在这里插入图片描述

		<Tabs type="card" @click="testOnclick">
			    <Tab-Pane key="tab0" label="标签0" name="tabOne">
					<div>
						标签0 content
					</div>
				</Tab-Pane>
				<Tab-Pane key="tab1" label="标签1" name="tabTwo">
					<div>
						标签2 content
					</div>
				</Tab-Pane>
				<Tab-Pane key="tab2" label="标签2" name="tabThree">
					<div>
						标签3 content
					</div>
				</Tab-Pane>
			</Tabs>

methods:{ testOnclick(e) { console.log(e); } }

根本无法触发函数。而如果换成onclick的话，则会报函数未定义的错误ReferenceError: testOnclick is not defined

解决办法就是不要省略，要用@on-click

<Tabs type="card" @on-click="testOnclick"</Tabs>
返回值是你的子菜单的name，因此我的console.log(e)打印出来的就是

tabTwo                                                                     testTab.html:38:14
tabThree                                                                   testTab.html:38:14
tabTwo                                                                     testTab.html:38:14

扩展——假如我需要多个参数呢？

做不了，水平有限。
尝试了console.log(this),把当前的this打印出来，
发现也只是个vue对象，而且没找到关于这几个子菜单的name的属性值。
目前是没搞出来，有知道的可以评论我下。

本意是，你的返回值，我还是要，但是我还需要一个我自己传进去的值，就是这个字符串的tessssss。但是不行。
<Tabs type="card" @on-click="testOnclick('tesssss')">

	testOnclick(e,testVal) {
		console.log(this);
		console.log(e);
		console.log(testVal);
	}