Vue.js 3 在运行时挂载组件实例

Question

我正在尝试 vue-leaflet/vue-leaflet 并尝试创建 <l-polyline> 的许多实例里面<l-map>成分。但我不知道如何实现这一点。

静态版本( map 附带绘制的折线):

<template>
  <l-map ref="map" v-model:zoom="zoom" :center="[47.41322, -1.219482]">
    <l-polyline
        :lat-lngs="[
        [47.334852, -1.509485],
        [47.342596, -1.328731],
        [47.241487, -1.190568],
        [47.234787, -1.358337],
      ]"
        color="green"
    />
  </l-map>
</template>

动态尝试(准备一个函数以编程方式添加折线，但不起作用):

<template>
  <l-map ref="map" v-model:zoom="zoom" :center="[47.41322, -1.219482]">
  </l-map>
</template>

<script lang="ts">
function someAction(){
let poly= createApp(LPolyline,{
  latLngs:[[47.334852, -1.509485],
    [47.342596, -1.328731],
    [47.241487, -1.190568],
    [47.234787, -1.358337]]
});
poly.mount(this);

}

</script>

为了澄清，我需要一个函数来插入/附加 LPolyline组件进入LMap运行时期间的组件，不应在 LMap 内声明它如果可能的话，首先。

我刚刚开始使用 Vue.js，所以如果我犯了一个明显的错误，我深表歉意。感谢您的理解。

Answer 1

只需添加您想要使用的组件，然后像任何其他 Vue 组件一样向它们提供数据。例如，您可以使用 v-for 从数组加载折线:

    <l-map :zoom="zoom" :center="center">
      <l-polyline
        v-for="line in lines"
        :key="line.id"
        :lat-lngs="line.latLongs"
        :color="line.color"
      />
    </l-map>

看看 sandbox