vue动态渲染@click点击事件：搜索按钮的创建与封装优化

vue动态渲染@click按钮点击事件

这里我们以“搜索”按钮功能为演示，想要单机按钮产生搜索事件大致的代码如下：

 

1.创建一个带图标的“搜索”按钮。

<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>

2.对“搜索”按钮功能对他的函数进行一个封装和优化。

<script>

import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/flow/info";

export default {

  methods: {

    /** 搜索按钮操作 */

    handleQuery() {

      this.queryParams.pageNum = 1;

      this.getList();

</script>

另外，需要注意的是，点击事件的时间还可以加.native,就可以实现点击事件， 这里的例子@click 搜索事件是经过 Vue 封装的。