发出事件 $emit 时，Vue $on 没有运行我的函数，即使我可以看到在 Vue 控制台中触发的事件

Posted 2023-02-16

【中文标题】发出事件 $emit 时，Vue $on 没有运行我的函数，即使我可以看到在 Vue 控制台中触发的事件

【英文标题】：Vue $on not running my function when event $emit is emited, even though I can see the event triggered in Vue console

【发布时间】：2018-02-08 07:40:36

【问题描述】：

我正在尝试测试我的$on 功能是否正常工作。我可以清楚地看到Vue控制台正在接收事件发出，但是$on中的预定义回调函数没有被调用。

代码如下：

<template lang="html">
  <div class="test">
    <Filters></Filters>
  <div>
    <ul class="o-list c-stores">
      <Result v-bind:total="filteredRestuarants.length" v-bind:open="isOpen" v-on:toggle="toggleRestaurantList"></Result>
      <li v-for="(restaurant, index) in filteredRestuarants" class="c-stores__location" :class="'first': isFirst(index), 'last': isLast(index, restaurants)">
        <Location :index="index" :store="restaurant" :link="() => setCurrentRestaurant(restaurant)"></Location>
      </li>
    </ul>
  </div>
  </div>
</template>

<script>
import eventHub from './../../event-hubs/storefinder'
import Location from './Location'
import Filters from './Filters'
import Result from './Result'

export default 
  props: ["restaurants", "isOpen", "currentSearch"],
  data() 
    return 
      attributes : [],
    
  ,
  head: 
    title: function () 
      return 
        inner: this.$t('storefinder.overview')
      
    ,
    meta: function functionName() 
      return [
          name: 'og:title',
          content: this.$t('storefinder.overview') + ' - ' + this.$t('storefinder.name'),
          id: "og-title"
        ,
        
          name: 'description',
          content: this.$t('storefinder.description'),
          id: "meta-description"
        ,
        
          name: 'og:description',
          content: this.$t('storefinder.description'),
          id: "og-description"
        ,
      ]
    
  ,
  components: 
    Location,
    Filters,
    Result
  ,
  computed: 
    filteredRestuarants(rest) 
      let restaur = rest || this.restaurants;
      return this.restaurants;
    
  ,
  methods: 
    startEvents()
      eventHub.$on('addFilterTheRestaurants', (attribute) => console.log("test"));
      eventHub.$on('removeFilterTheRestaurants', (attribute) => console.log("test"));
    ,
    toggleRestaurantList() 
      eventHub.$emit('showRestaurantList');
    ,
    setCurrentRestaurant(restaurant) 
      this.trackRestaurantSelect(restaurant.publicNameSlug);
      this.$router.push(
        name: "store",
        params: 
          restaurant: restaurant.publicNameSlug
        
      );
    ,
    trackRestaurantSelect(restaurantName) 
      dataLayer.push(
        'event': 'GAEvent',
        'eventCategory': 'restaurants',
        'eventAction': 'clickResult',
        'eventLabel': restaurantName,
        'eventValue': undefined,
        'searchTerm': this.currentSearch && this.currentSearch.toLowerCase(),
        'amountSearchResults': 1
      );
    ,
    created() 
      this.startEvents()
      // eventHub.$on('addFilterTheRestaurants', (attribute) => this.filteredRestuarants.value = this.restaurants.forEach(rest => console.log(rest)));
      // eventHub.$on('addFilterTheRestaurants', (attribute) => console.log("test"));
      // eventHub.$on('removeFilterTheRestaurants', (attribute) => console.log("test"));
    ,
    beforeDestroy () 
      bus.$off('addFilterTheRestaurants')
      bus.$off('removeFilterTheRestaurants')
    ,
    isLast: function (idx, list) 
      return idx === list.length - 1;
    ,
    isFirst: function (idx) 
      return idx === 0;
    ,
  

</script>

在此处发出它：

<template lang="html">


<div class="c-filters">
    <div class="c-filters-list">
  // Here I call the function to $emit my event
      <div class="c-filters__item" v-for="item in filters" @click="(e) => toggleClass(e); addFilter(item)"> 
        $t(`storefinder.store.attributes.$item`)
      </div>
    </div>
  </div>
</template>

<script>
import getKeys from './../../i18n/'
import eventHub from './../../event-hubs/storefinder'
import notificationHub from './../../event-hubs/notification'
import GLSApi from './../../api/gls'

export default 
  data() 
    return 
      attributes: null,
      filters : [
        "WIFI",
        "TABLESERVICE",
        "MCCAFE",
        "INDOORDINING",
        "DRIVETHRU",
        "BREAKFAST",
        "MALEFEMALEHANDICAPACCESSIBLE",
        "BABYCHANGING",
        "BIRTHDAYPARTIES",
        "SELFORDERKiosK",
        "OUTDOORPLAYGROUND",
        "INDOORPLAYGROUND",
        "JUNIORCLUB"
      ]
    
  ,
  computed: 
    getAttributes() 
      let arr = this.attributes.map(elem => elem.storeAttributes.attribute)
      return arr.map((el,index, array) => array[index].map(obj => obj.type))
    
  ,
  methods: 
    toggleClass(e)
      e.target.classList.contains("add-filter") ? e.target.classList.remove("add-filter") : e.target.classList.add("add-filter") ;
    ,
 // here it the $emit happening
    addFilter (item) 
      eventHub.$emit('addFilterTheRestaurants', item);
    ,
    deleteFilter (item) 
      eventHub.$emit('removeFilterTheRestaurants', item);
    
  ,
  beforeCreate() 
    eventHub.$on('attributesLoaded', (params) => this.attributes = params);
  

</script>

【问题讨论】：

您在 startEvents 计算属性中注册了处理程序，但您是否在任何地方使用该属性？

那么startEvents 会自动调用，因为它在computed 属性中，不是吗？为什么我会在 $emit onClick 时看到正在发出的事件，正如您在第二个文件中看到的那样

【参考方案1】：

您在计算属性中注册了您的addFilterTheRestaurants 事件。但是，除非引用了计算属性，否则不会调用计算属性的函数。由于您从不引用this.startEvents，因此该函数永远不会执行。

您可以整天发出addFilterTheRestaurants 事件，但什么都不会发生，因为您还没有注册该事件。

只需在created 挂钩中注册$on 处理程序。或者使 startEvents 成为方法而不是计算属性，并在 created 挂钩中调用它。但是，请确保您指定的是 created 生命周期挂钩，而不是名为 created 的方法。

【讨论】：

我之前把它放在created() 方法中，它也不起作用，这就是为什么我在computed 中尝试它。我现在已经将它转移到methods 并从created() 调用它，但它仍然没有控制台记录任何东西:(

控制台中没有任何内容，Vue 事件浏览器观察者看到正在调用的事件。

中间组件是什么？你确定它正在创建吗？

中间组件是什么意思？我已更新我的代码以反映我所做的更改。

您的methods 中有created。你需要使用created生命周期钩子