使用v-if打开和关闭时，Vuejs会丢失其@click绑定处理程序

Question

我正在使用vue-leaflet和esri-leaflet

我在一个vue组件中呈现两个独立的ESRIFeatureLayers，并通过v-if在它们之间切换。在第一个页面加载时。map @click处理程序工作得很好。但是，一旦通过v切换了它们，如果点击处理程序不再触发

这是vue组件

<LLayerGroup
    name="Zones"
    layer-type="overlay"
  >
    <EsriFeatureLayer v-if="this.hydroUnit === GROUNDWATER"
      ref="gw-layer"
      :url="GW_FEATURES_URL"
      :token="ARCGIS_TOKEN"
      :style-function="gwStyle"
      :simplify-factor="0.5"
      @mouseover="mouseover"
      @mouseout="mouseout"
      @click="clickGW"
      @featureLayer="updateFeatureLayer"
    />
      <LMarker v-if="markerLatLng"
        name="clickMarker"
        :lat-lng="markerLatLng">
        <LTooltip :options="{ permanent: true }">{{ Markertooltip }}</LTooltip>
      </LMarker>
    <EsriFeatureLayer v-if="this.hydroUnit === SURFACE_WATER && this.sWSitesColors.length > 0"
      ref="sw-layer"
      :url="SW_FEATURES_URL"
      :token="ARCGIS_TOKEN"
      :style-function="swStyle"
      :simplify-factor="0.5"
      @mouseover="mouseover"
      @mouseout="mouseout"
      @click="clickSW"
      @layerClicked="clickSW"
      @featureLayer="updateFeatureLayer"
    />
  </LLayerGroup>

这是ESRIFeatureLayer插件组件

<template>
  <div style="display: none;">
    <slot @click="$event('layerClicked')" v-if="ready" />
  </div>
</template>

<script>
import { findRealParent, propsBinder } from 'vue2-leaflet'
import { featureLayer } from 'esri-leaflet'
import * as L from 'leaflet'
const props = {
  url: {
    type: String,
    required: true,
  },
  styleFunction: {
    type: Function,
    default: undefined,
  },
  simplifyFactor: {
    type: Number,
    default: undefined,
  },
  precision: {
    type: Number,
    default: undefined,
  },
  visible: {
    type: Boolean,
    default: true,
  },
  layerType: {
    type: String,
    default: undefined,
  },
  name: {
    type: String,
    default: undefined,
  },
  token: {
    type: String,
    default: undefined,
  },
  pane: {
    type: String,
    default: undefined,
  },
}
export default {
  name: 'EsriFeatureLayer',
  props,
  data () {
    return {
      ready: false,
    }
  },
  watch: {
    styleFunction (newVal) {
      this.mapObject.setStyle(newVal)
    },
    url (newVal) {
      this.parentContainer.removeLayer(this)
      this.setOptions()
      this.parentContainer.addLayer(this, !this.visible)
    },
  },
  mounted () {
    this.setOptions()
    L.DomEvent.on(this.mapObject, this.$listeners)
    propsBinder(this, this.mapObject, props)
    this.ready = true
    this.parentContainer = findRealParent(this.$parent)
    this.parentContainer.addLayer(this, !this.visible)
  },
  beforeDestroy () {
    this.parentContainer.removeLayer(this)
  },
  methods: {
    setVisible (newVal, oldVal) {
      if (newVal === oldVal) return
      if (newVal) {
        this.parentContainer.addLayer(this)
      } else {
        this.parentContainer.removeLayer(this)
      }
    },
    setOptions () {
      const options = {}
      if (this.url) {
        options.url = this.url
      }
      if (this.styleFunction) {
        options.style = this.styleFunction
      }
      if (this.simplifyFactor) {
        options.simplifyFactor = this.simplifyFactor
      }
      if (this.precision) {
        options.precision = this.precision
      }
      if (this.token) {
        options.token = this.token
      }
      if (this.pane) {
        options.pane = this.pane
      }
      this.mapObject = featureLayer(options)
      this.$emit('featureLayer', this.mapObject)
    },
    updateVisibleProp (value) {
      this.$emit('update:visible', value)
    },
  },
}
</script>

我已经尝试添加了一个事件单击处理程序，正如您在使用@click="$event('layerClicked')"时看到的那样

但是，一旦它们被关闭一次，就不会触发任何单击事件。

如果组件通过v-if绑定重新显示，我如何将@click处理程序重新绑定到ESRIFeatureLayer？

Answer 1

我找到了一个解决办法

当子组件上的监视属性(url)发生更改时，我所要做的就是重新初始化侦听器。

父级

<EsriFeatureLayer 
      :url="this.hydroUnit === GROUNDWATER ? GW_FEATURES_URL : SW_FEATURES_URL"
      :token="ARCGIS_TOKEN"
      :style-function="this.hydroUnit === GROUNDWATER ? gwStyle : swStyle"
      :simplify-factor="0.5"
      @mouseover="mouseover"
      @mouseout="mouseout"
      @click="click"
      @featureLayer="updateFeatureLayer"
    />

当加氢装置改变时，三元操作员改变了URL

ESRIFeatureLayer中被监视的url变量重新初始化监听器

  watch: {
    styleFunction (newVal) {
      this.mapObject.setStyle(newVal)
    },
    url (newVal) {
      this.parentContainer.removeLayer(this)
      this.setOptions()
      this.parentContainer.addLayer(this, !this.visible)
      L.DomEvent.on(this.mapObject, this.$listeners)
    },
  },
  mounted () {
    this.setOptions()
    L.DomEvent.on(this.mapObject, this.$listeners)
    propsBinder(this, this.mapObject, props)
    this.ready = true
    this.parentContainer = findRealParent(this.$parent)
    this.parentContainer.addLayer(this, !this.visible)
  },