在使用Element组件中的Dropdown 下拉菜单时,给el-dropdown-item其添加一个@click事件却并没有成功获取Dom事件这是为什么呢?
通过读取文档发现,el-dropdown-item并没有click事件,也就是@click将不再生效,但是我们又想要使用该事件,怎么写呢?这时候我们可以用到.native。
@click.native 将触发 el-dropdown-item 根元素的事件
什么是根元素
在Vue.js中，每个组件都有一个根元素，它是组件渲染的根节点。根元素是一个被Vue实例管理的最外层DOM元素。组件的模板（template）中包含的所有内容都必须位于根元素之内。换句话说，根元素是Vue组件中最外层的HTML标签。
总结来说：
- @click监听当前组件根元素上的点击事件，并且无法监听到从子元素冒泡上来的事件。
- @click.native用于监听组件根元素祖先元素上冒泡上来的点击事件。它可以在组件内部的子元素上触发，并能够被祖先元素捕获到。
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>1</el-dropdown-item>
<el-dropdown-item>2</el-dropdown-item>
<el-dropdown-item>3</el-dropdown-item>
<el-dropdown-item @click="xxx1">4</el-dropdown-item> //不在生效
<el-dropdown-item @click.native="xxx2">5</el-dropdown-item>
</el-dropdown-menu>
