Vue2根据数据动态显示按钮并绑定方法

功能描述

根据后端返回的按钮数据动态渲染页面，并根据后端返回数据中的方法名为每个按钮动态的绑定点击事件

---

一、技术栈

• 前端框架：vue2
• 前端UI框架：Ant Design of Vue（v1.7.8）

二、核心

• this.$options.methods — 初始化函数，可以用来实现在methods的一个方法中调用methods中的另外一个方法

三、功能实现

代码如下

<template>
  <div>
    <a-button
      v-for="(item, index) in buttonlist"
      type="primary"
      :key="index"
      @click="handleMenuClick(item.button_fun)"
    >
      {{ item.button_name }}
    </a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      nickname: '泡泡哥',
      // buttonlist用来模拟后端接口返回的数据,真实项目中该数据是通过请求从后端获取的
      buttonlist: [
        { button_fun: 'add', button_name: '新增' },
        { button_fun: 'delete', button_name: '删除' },
        { button_fun: 'update', button_name: '修改' },
        { button_fun: 'query', button_name: '查询' }
      ]
    };
  },
  methods: {
    handleMenuClick (funcname) {
      // 为每个按钮绑定点击事件,动态的调用接口返回的buttonlist数据中的button_fun
      this.$options.methods[funcname]();
    },
    add () {
      alert('新增');
    },
    delete () {
      alert('删除');
    },
    update () {
      alert('修改');
    },
    query () {
      alert('查询');
    }
  }
};
</script>

<style lang="less" scoped></style>

四、注意this指向的改变

• 在 handleMenuClick 方法中调用其他方法后，其他方法中的 this 指向已经不是 Vue 实例了，而是变为了 vm.$options.methods
• 如果想要在其他方法中应用 Vue 实例，可以使用以下两种方法：
  1. 可以通过传递形参实现
  2. 改变this指向（推荐使用）

方法1代码如下

<template>
  <div>
    <a-button
      v-for="(item, index) in buttonlist"
      type="primary"
      :key="index"
      @click="handleMenuClick(item.button_fun)"
    >
      {{ item.button_name }}
    </a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      nickname: '泡泡哥',
      buttonlist: [
        { button_fun: 'add', button_name: '新增' },
        { button_fun: 'delete', button_name: '删除' },
        { button_fun: 'update', button_name: '修改' },
        { button_fun: 'query', button_name: '查询' }
      ]
    };
  },
  methods: {
    handleMenuClick (funcname) {
      // 这里的this指向Vue实例
      const _this = this;
      this.$options.methods[funcname](_this);
    },
    add (_this) {
      console.log(this);
      console.log(_this) // _this指向Vue实例
      alert('新增', _this.nickname);  // 这样就可以获取data中的nickname了
    },
    delete () {
      alert('删除');
    },
    update () {
      alert('修改');
    },
    query () {
      alert('查询');
    }
  }
};
</script>

<style lang="less" scoped></style>

• 注：add 方法中的 this 是一个包含 methods 中所有方法的对象，如下图所示
  

方法2代码如下

<template>
  <div>
    <a-button
      v-for="(item, index) in buttonlist"
      type="primary"
      :key="index"
      @click="handleMenuClick(item.button_fun)"
    >
      {{ item.button_name }}
    </a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      nickname: '泡泡哥',
      // buttonlist用来模拟后端接口返回的数据,真实项目中该数据是通过请求从后端获取的
      buttonlist: [
        { button_fun: 'add', button_name: '新增' },
        { button_fun: 'delete', button_name: '删除' },
        { button_fun: 'update', button_name: '修改' },
        { button_fun: 'query', button_name: '查询' }
      ]
    };
  },
  methods: {
    handleMenuClick (funcname) {
      // 为每个按钮绑定点击事件,动态的调用接口返回的buttonlist数据中的button_fun
      // 使用call改变this指向为当前Vue实例
      this.$options.methods[funcname].call(this);
      // 其他可用的改变this的方法
      // this.$options.methods[funcname].apply(this);
      // this.$options.methods[funcname].bind(this)();
    },
    add () {
      alert('新增',this.nickname); //=> '新增',泡泡哥
    },
    delete () {
      alert('删除');
    },
    update () {
      alert('修改');
    },
    query () {
      alert('查询');
    }
  }
};
</script>

<style lang="less" scoped></style>