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

报错基本上都是因为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)
      });
    });
  }

 

### 回答1: 微信小程序中的this.$emit is not a function这个错误提示通常出现在使用Vue.js框架开发小程序时。此错误通常是因为在非父子组件之间使用了$emit方法。 在Vue.js中,$emit方法是用于在子组件中触发自定义事件,然后在父组件中通过v-on指令来监听这些自定义事件并执行相应的操作。但是,在微信小程序中,并没有内置的$emit方法,因此直接调用this.$emit会导致此错误。 解决这个问题的方法是使用微信小程序提供的官方事件机制。微信小程序中的组件之间通信主要使用两种方式:事件绑定和消息传递。 1. 事件绑定:在父组件中,可以通过给子组件的标签添加自定义事件属性,如bind:customEventName="methodName",然后在子组件中通过triggerEvent方法来触发事件。 2. 消息传递:通过微信小程序提供的Page间通信机制,可以在父组件中通过wx.pageEvent.emit方法触发自定义事件,在子组件中通过wx.pageEvent.on方法来监听事件并执行相应的操作。 因此,要解决this.$emit is not a function的问题,可以采用上述方法来实现组件之间的通信,避免直接调用this.$emit方法。 ### 回答2: this.$emit 不是一个函数的错误通常是由于以下几种原因引起的: 1. 在微信小程序中,没有定义Vue实例的this.$emit方法。Vue中的this.$emit方法用于触发当前组件的自定义事件,而微信小程序中并没有这个方法。 2. 可能是代码中的语法错误。在调用this.$emit方法时,可能存在着一些语法错误,比如拼写错误、大小写错误等。 3. 组件之间的通信问题。如果在组件A中调用了this.$emit方法,但是组件B并没有监听这个事件,那么就会报错。需要确认是否正确地在组件B中使用了this.$on方法来监听这个事件。 解决这个问题的方法有: 1. 在微信小程序中,可以使用wx.onCustomEvent方法来触发自定义事件,代替Vue中的this.$emit方法。 2. 检查代码中是否存在语法错误,特别是与this.$emit相关的代码。 3. 确保组件之间正确地进行了通信,即在监听事件的组件中正确地使用了this.$on方法。 总之,要解决微信小程序中this.$emit is not a function的问题,需要确认是否正确地使用了微信小程序提供的事件触发方法,并检查代码中是否存在语法错误和组件间的通信问题。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值