Question

我正在尝试扩展vue.js组件（来自Vue2Leaflet的LMarker），以使其能够做两件事：

存储有关标记的其他标识信息
发出一个自定义事件，父组件可以使用该事件显示与从服务器提取的标记有关的信息

下面的代码是我拥有的：

<template>
  <div style="display: none;">
    <slot></slot>
  </div>
</template>
<script>
  import LMarker from 'vue2-leaflet'

  export default {
    name: 'LocalityMarker',
    extends: LMarker,
    props: {
      name: {
        type: String,
        required: true
      }

    },
    data: function () {
      return {
        number: 678
      }
    },
    methods: {
      updateLocality: function () {
        this.$emit('marker-clicked', this.number)
      }
    }
  }
</script>

但是，这不起作用。使用Vue Devtools查看组件时，看到的是LocalityMarker中定义的属性，而不是LMarker中定义的属性。

Vue.js文档没有深入解释extends的实际工作原理，因此我无法判断自己在做什么。

非常感谢您的帮助。

Answer 1

好吧，我有一个关于您的自定义标记的解决方案。我没有扩展它，但是我创建了另一个组件，该组件将由父组件操纵。
我不确切知道您想要什么，但是如果您想做一个标记来接收更多信息并显示该信息；我希望我能写点什么来帮助你。对不起，我的写信（我知道，我很糟糕）。
此父组件

<template lang="pug">
  div
    l-map( :zoom="zoom" :center="center" style="height:500px")
      l-tile-layer( :url="url" , :attribution="attr" )
       div( v-for="marker in markers")
        custome(  ref="cada" ,  :coordinateLL="marker" , :information="'hola que tal;)'")
    button( @click="cambio" ) Se ve?
</template>

<script>
import { LMap, LTileLayer, LMarker, LIcon} from "vue2-leaflet"
import custome from "./protoV2.vue"

export default{
  name:"Proto",
  components:{
    LMap, LTileLayer, LMarker, LIcon, custome
  },
  data (){
    return {
        visible: true,
        url: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
        attr: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
        zoom : 2,
        center: [0,0],
        markers: [ [ 46.1222, -12.222 ], [ 46.1222, 12.222 ]  ],
    }
  },
  methods : {
      cambio: function(){
        for( let idx = 0; idx < this.$refs["cada"].length; idx++ ){
            this.$refs["cada"][idx].IsVisible( "gg" );
        }
      }
    }
 };
 </script>

儿童组件

<template >
  <div >
    <l-marker :lat-lng="coordinate"  >
      <slot v-if="visible">
        <l-tooltip :content="message" :options= "{ permanent: true}"  />
      </slot>
    </l-marker>
  </div>
</template>

<script>
  import { LMarker, LPopup, LTooltip } from "vue2-leaflet";

  export default{
  name: "custome",
  components:{
     LMarker, LPopup, LTooltip
  },
  props: {
     coordinateLL : {
         type : Array,
         require : true
     },
     information : {
         type : String,
         require: true
     }
  },
  beforeMount: function(){
        this.coordinate = L.latLng( this.coordinateLL );
  },
  methods: {
      IsVisible: function( msg ){
          this.visible = !this.visible;
      }
  },
  data () {
      return {
         visible: true,
         coordinate: null,
         message: this.information,
         activa: false
      }
  }
};

Answer 2

我认为问题在于您要导入整个vue2-leaflet软件包，而不是LMarker。如果在导入后将调试器投入其中并检查LMarker对象，则会看到类似

{L: {…}, findRealParent: ƒ, propsBinder: ƒ, LCircle: {…}, LCircleMarker: {…}, …}

通过将导入行更改为import { LMarker } from 'vue2-leaflet';，可以仅导入LMarker。

在Vue2Leaflet中扩展LMarker

2 个答案: