我有一个Vue.js组件,其模板如下:
<template>
<div>
<div class="map" />
<div class="something-else" />
</div>
</template>
在<script>
部分中,我希望获得对类map
的元素的引用。我知道您可以使用this.$el
来引用最外层元素,但是如何选择其中一个子元素?我不希望使用CSS类作为选择器,因为这个组件的许多实例都可以具有相同的类。
我的用例是我需要将一个DOM元素传递给Leaflet的constructor,这是一个映射库。
答案 0 :(得分:5)
我对Leaflet一无所知,但您可能会使用ref。
<template>
<div>
<div class="map" ref="map" />
<div class="something-else" />
</div>
</template>
在您的组件中
mounted(){
new Leaflet(this.$refs.map)
}