获取对Vue子元素的引用

Question

我有一个Vue.js组件，其模板如下：

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

在<script>部分中，我希望获得对类map的元素的引用。我知道您可以使用this.$el来引用最外层元素，但是如何选择其中一个子元素？我不希望使用CSS类作为选择器，因为这个组件的许多实例都可以具有相同的类。

我的用例是我需要将一个DOM元素传递给Leaflet的constructor，这是一个映射库。

Answer 1

我对Leaflet一无所知，但您可能会使用ref。

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

在您的组件中

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