问题描述

最近在做项目时，前端UI框架爱使用了elementUI，但在使用其组件时，需要在组件自身的事件回调函数中加入自定义的参数便于后续逻辑的编写；
直接在回调函数中传入参数，会出现错误

<el-menu 
            class="cz-new-menu" 
            @select="goToPage(true)" 
            :default-active="defaultIndex"
            :collapse="isCollapse">
            <template v-for="menu in menuList">
              <el-submenu :index="menu.menuId" v-if="menu.children && menu.children.length > 0">
                <template slot="title">
                  <i :class="menu.icon"></i>
                  <span slot="title">{{menu.name}}</span>
                </template>
                <template v-for="child in menu.children">
                  <el-submenu :index="child.menuId" v-if="child.children && child.children.length > 0">
                    <template slot="title">
                      <span>
                        <i :class="child.icon"></i>
                        <span slot="title">{{child.name}}</span>
                      </span>
                    </template>
                  </el-submenu>
                  <el-menu-item :index="child.menuId" v-else>
                    <span>
                      <i :class="child.icon"></i>
                      <span slot="title">{{child.name}}</span>
                    </span>
                  </el-menu-item>
                </template>
              </el-submenu>
              <el-menu-item :index="menu.menuId" v-else>
                <i :class="menu.icon"></i>
                <span slot="title">{{menu.name}}</span>
              </el-menu-item>
            </template>

          </el-menu>

解决方案

对回调函数进行封装@event="((param) => {fn(param,customParam)})"
其中param是事件回调函数自己的参数

<el-menu 
            class="cz-new-menu" 
            @select="((index,indexPath) => {goToPage(index,indexPath,true)})" 
            :default-active="defaultIndex"
            :collapse="isCollapse">
            <template v-for="menu in menuList">
              <el-submenu :index="menu.menuId" v-if="menu.children && menu.children.length > 0">
                <template slot="title">
                  <i :class="menu.icon"></i>
                  <span slot="title">{{menu.name}}</span>
                </template>
                <template v-for="child in menu.children">
                  <el-submenu :index="child.menuId" v-if="child.children && child.children.length > 0">
                    <template slot="title">
                      <span>
                        <i :class="child.icon"></i>
                        <span slot="title">{{child.name}}</span>
                      </span>
                    </template>
                  </el-submenu>
                  <el-menu-item :index="child.menuId" v-else>
                    <span>
                      <i :class="child.icon"></i>
                      <span slot="title">{{child.name}}</span>
                    </span>
                  </el-menu-item>
                </template>
              </el-submenu>
              <el-menu-item :index="menu.menuId" v-else>
                <i :class="menu.icon"></i>
                <span slot="title">{{menu.name}}</span>
              </el-menu-item>
            </template>

          </el-menu>