获取对Vue子元素的引用

Question

我有一个Vue.js组件,模板看起来像:

<template>
  <div>
    <div class="map" />
    <div class="something-else" />
  </div>
</template>

在<script>我想要获得带有类的元素的引用的部分中map.我知道你可以this.$el用来引用最外面的元素,但是我如何选择它的一个子元素呢？我不希望将CSS类用作选择器,因为可能有许多此组件的实例都具有相同的类.

我的用例是我需要将一个DOM元素传递给Leaflet 的构造函数,这是一个映射库.

Answer 1

我对Leaflet一无所知,但你可能会使用ref.

<template>
  <div>
    <div class="map" ref="map" />
    <div class="something-else" />
  </div>
</template>

在您的组件中

mounted(){
    new Leaflet(this.$refs.map)
}