博客

前段时间学习了Vue.js，并找了一个小项目练手，最后打包上线的时候发现了一些问题，在开发环境下，所有的模块都很正常，但是在生产环境下却有

部分按钮无法正常显示

。

在Vue.js中，按钮的功能一般是通过

作用域插槽

来实现的，作用域插槽可以使按钮能对一些数据进行相应的操作。

在我的项目中，我有部分按钮不需要传递参数，所以没有使用作用域插槽。代码如下：

<template>
    <el-button type="primary" icon="el-icon-edit" size="mini" @click="showBox"></el-button>
    <el-button type="success" icon="el-icon-location" size="mini" @click="showProgressBox"></el-button>
</template>

这两个按钮在开发环境下可以正常显示，实现相应的功能。但是在开发环境下就消失了，我试着给他们加上了作用域插槽：

<template slot-scope="scope">
    <el-button type="primary" icon="el-icon-edit" size="mini" @click="showBox(scope.row)"></el-button>
    <el-button type="success" icon="el-icon-location" size="mini" @click="showProgressBox(scope.row)"></el-button>
</template>

然后我再次打包，上线，

按钮正常显示

。

我在点击函数不需要参数的情况下还是给他们传递了参数：

@click="showBox(scope.row)


原因是我在构建项目的时候引入了selintrc代码检查，这个代码检查非常严格，多一个空格都会报错，无法正常打包，所以我给它们传递了参数，如果没有引入selintrc，那么可以写成：

<template slot-scope="scope">
    <el-button type="primary" icon="el-icon-edit" size="mini" @click="showBox"></el-button>
    <el-button type="success" icon="el-icon-location" size="mini" @click="showProgressBox"></el-button>
</template>