vue 父子组件传值报错：this.$emit is not a function 解决

最新推荐文章于 2023-09-20 11:59:38 发布

yssa1125001

最新推荐文章于 2023-09-20 11:59:38 发布

阅读量1.9w

点赞数 5

分类专栏： vue 前端技术文章标签： emit not a function vue 父子组件组件传值

本文链接：https://blog.csdn.net/yssa1125001/article/details/107449755

版权

vue 同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

前端技术

13 篇文章 0 订阅

订阅专栏

报错基本上都是因为this指向问题，基本上就是 function 和 () => 之间的问题，进行这俩的替换基本上都可以解决。我碰到了此问题，因为this指向了方法，而不是vue，报错代码：

mounted () {
    lazyAMapApiLoaderInstance.load().then(() => {
      // your code ...
      this.map = new AMap.Map("amapContainer", {
        center: [121.59996, 31.197646],
        zoom: this.zoom
      });

      this.map.on('click', function (e) {
        const data = getLngLat(e)
        this.$emit("lnglat", data)
      });
    });
  },

有两种解决方式：

第一种方式，对象中转：

ounted () {
    const _this = this
    lazyAMapApiLoaderInstance.load().then(() => {
      // your code ...
      this.map = new AMap.Map("amapContainer", {
        center: [121.59996, 31.197646],
        zoom: this.zoom
      });

      this.map.on('click', function (e) {
        const data = getLngLat(e)
        _this.$emit("lnglat", data)
      });
    });
  },

第二种方式，使用箭头函数：

mounted () {
    lazyAMapApiLoaderInstance.load().then(() => {
      // your code ...
      this.map = new AMap.Map("amapContainer", {
        center: [121.59996, 31.197646],
        zoom: this.zoom
      });

      this.map.on('click', (e) => {
        const data = getLngLat(e)
        this.$emit("lnglat", data)
      });
    });
  }