1. 首页
  2. 文章中心
  3. vue

vue提取公共方法，并解决不能使用this的问题(获取调用该方法的实例this)

74 阅读 0 评论
我是靠谱客的博主 合适羽毛，这篇文章主要介绍vue提取公共方法，并解决不能使用this的问题(获取调用该方法的实例this)，现在分享给大家，希望可以做个参考。

上一篇博客提到动态渲染table的操作按钮列并绑定点击事件：
vue+Element UI table表格动态渲染(包括操作按钮列)、按钮动态绑定点击事件
所以这里接着做，将按钮的点击事件提取为全局公共方法再调用：
一、创建一个commonApi.js文件，将点击事件提取到这里，并写一个获取调用此js中方法的vue组件实例(this)的方法：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//用来获取 调用此js的vue组件实例(this)
let vm = null;
const sendThis = (_this)=>{
    vm = _this;
};

 //新增
function add() {
    alert("新增~");
}
 //编辑
function edit() {
    alert("编辑~");
}
 //删除
function delete() {
    alert("删除~");
}
//弹出对话框
function myDialog() {
    vm.$alert(
        "喵喵喵喵喵！",
        "猫",
        {
            confirmButtonText: "确定",
        }
    );
}

// 将全局公共方法，组合成一个对象，并暴露出去
export default {
    sendThis,//暴露函数
    add,
    edit,
    delete,
    myDialog
}

注意：这里为了使用this举例，新增了一个弹出对话框的方法，需要在上一篇文章中的Table.vue中新增一个按钮，绑定click: “myDialog”

  1. 更改前：
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
data() {
    return {
      cols: [
        { prop: "name", label: "姓名" },
        { prop: "sex", label: "性别" },
        { prop: "age", label: "年龄" },
        { prop: "operate", label: "操作" },
      ],
      tableData: [
        {
          name: "阿熙",
          sex: "男",
          age: "18",
          operate: [
            { name: "新增", type: "primary", size: "mini", click: "add" },
            { name: "编辑", type: "danger", size: "mini", click: "edit" },
            { name: "删除", type: "primary", size: "mini", click: "delete" },
          ],
        },
        {
          name: "小美",
          sex: "女",
          age: "16",
          operate: [
             { name: "新增", type: "primary", size: "mini", click: "add" },
             { name: "编辑", type: "danger", size: "mini", click: "edit" },
             { name: "删除", type: "primary", size: "mini", click: "delete" },
          ],
        },
        {
          name: "囡囡",
          sex: "女",
          age: "20",
          operate: [
            { name: "新增", type: "primary", size: "mini", click: "add" },
            { name: "编辑", type: "danger", size: "mini", click: "edit" },
            { name: "删除", type: "primary", size: "mini", click: "delete" },
          ],
        },
      ],
    };
  },
  1. 更改后：
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
data() {
    return {
      cols: [
        { prop: "name", label: "姓名" },
        { prop: "sex", label: "性别" },
        { prop: "age", label: "年龄" },
        { prop: "operate", label: "操作" },
      ],
      tableData: [
        {
          name: "阿熙",
          sex: "男",
          age: "18",
          operate: [
            { name: "新增", type: "primary", size: "mini", click: "add" },
            { name: "编辑", type: "danger", size: "mini", click: "edit" },
            { name: "删除", type: "primary", size: "mini", click: "delete" },
            { name: "弹出对话框", type: "danger", size: "mini", click: "myDialog" },
          ],
        },
        {
          name: "小美",
          sex: "女",
          age: "16",
          operate: [
             { name: "新增", type: "primary", size: "mini", click: "add" },
             { name: "编辑", type: "danger", size: "mini", click: "edit" },
             { name: "删除", type: "primary", size: "mini", click: "delete" },
             { name: "弹出对话框", type: "danger", size: "mini", click: "myDialog" },
          ],
        },
        {
          name: "囡囡",
          sex: "女",
          age: "20",
          operate: [
             { name: "新增", type: "primary", size: "mini", click: "add" },
             { name: "编辑", type: "danger", size: "mini", click: "edit" },
             { name: "删除", type: "primary", size: "mini", click: "delete" },
             { name: "弹出对话框", type: "danger", size: "mini", click: "myDialog" },
          ],
        },
      ],
    };
  },

二、在main.js中进行配置

复制代码
1
2
3
import commonApi from '../static/commonApi'
Vue.prototype.commonApi = commonApi;

在这里插入图片描述
三、引用
普通的引用只需：

复制代码
1
2
this.commonApi.add();

而在这个地方按钮动态添加点击事件，只需对调用该方法的vue组件iCell.vue稍作修改：

  1. 更改前：
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
methods: {
    //动态绑定操作按钮的点击事件
    handleClick(i) {
      let onClick = i;
      this[onClick]();
    },

    //新增
    add() {
      alert("新增~");
    },
    //编辑
    edit() {
      alert("编辑~");
    },
    //删除
    delete() {
      alert("删除~");
    },
  },
  1. 更改后：
复制代码
1
2
3
4
5
6
7
8
9
10
methods: {
    //动态绑定操作按钮的点击事件
    handleClick(i) {
        //发送this到公共方法js文件中
        this.commonApi.sendThis(this);
        let onClick = i;
        this.commonApi[onClick](); //调用公共方法js中的函数
    },
  },

最后

以上就是合适羽毛最近收集整理的关于vue提取公共方法，并解决不能使用this的问题(获取调用该方法的实例this)的全部内容，更多相关vue提取公共方法，并解决不能使用this内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(49)

相关文章

require引入js vue_请教 关于使用require 引入vue 和公共js的问题
require引入js vue_请教 关于使用require 引入vue 和公共js的问题
常用的vue、js方法this.$nextTick()
常用的vue、js方法this.$nextTick()
vue抽取公共方法———方法一
vue抽取公共方法———方法一
vue引入公共的初始的自定义的js js中只包含方法
vue引入公共的初始的自定义的js js中只包含方法
vue提取公共方法，并解决不能使用this的问题(获取调用该方法的实例this)
vue提取公共方法，并解决不能使用this的问题(获取调用该方法的实例this)
Vue组件公用方法如何提取mixin
Vue组件公用方法如何提取mixin
Vue项目如何使用公共js方法呢？
Vue项目如何使用公共js方法呢？
VsCode前端vue内页面使用js的方法二、js在vue页面使用总结
VsCode前端vue内页面使用js的方法二、js在vue页面使用总结

评论列表共有 0 条评论

立即
投稿
返回
顶部