Vue.js项目中IE<=11下箭头函数报错转普通函数后功能失效求助

你遇到的核心问题是箭头函数和普通函数的this指向完全不同：

• 箭头函数的this是词法作用域的，自动捕获外层上下文的this（也就是你的Vue组件实例）
• 换成普通function后，this会指向触发事件的Bus实例本身，而不是你的组件，所以this.cart赋值根本找不到组件里的cart属性，自然逻辑就失效了

下面给你几个可行的解决办法：

方法1：提前保存外层this到变量 #

在绑定事件前，把组件的this存到一个变量里，比如self，然后在回调函数里使用这个变量：

var self = this;
Bus.$on('UpdateCartData', function(event) {
  self.cart = event.cart;
  self.cart_options = event.cart_options;
});

这样不管回调函数里的this指向谁，我们都能通过self访问到组件实例的属性。

方法2：用bind()绑定this #

直接给普通函数绑定外层的this，确保回调里的this和组件实例一致：

Bus.$on('UpdateCartData', function(event) {
  this.cart = event.cart;
  this.cart_options = event.cart_options;
}.bind(this));

bind()会返回一个新函数，这个函数的this会被固定为你传入的参数（也就是组件的this）。

方法3：配置Babel自动处理（推荐） #

如果你的项目用了Babel，只要正确配置就能自动把箭头函数转换成兼容IE11且保留this指向的代码，不用手动修改：

1. 确保安装了必要的依赖：@babel/preset-env、core-js
2. 在你的Babel配置文件（比如babel.config.js）里添加如下配置：

module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: {
        ie: '11',
        chrome: '58',
        edge: '16'
      },
      useBuiltIns: 'usage',
      corejs: 3
    }]
  ]
};

这样Babel会根据你指定的目标浏览器，自动转换箭头函数并处理this的绑定，同时按需引入polyfill，保证代码在IE11和Chrome里都能正常运行。

测试的时候，记得在IE11里验证语法错误消失，同时在Chrome里确认购物车数据能正常更新哦。

内容的提问来源于stack exchange，提问作者Анжел Миленов