访问 vue 组件中的 ID 标签答案

【问题标题】：Accessing an ID tag within a vue component访问 vue 组件中的 ID 标签
【发布时间】：2016-05-11 10:22:22
【问题描述】：

我在 VUE 中创建了这个组件：

<template>
    <div class="col-md-6">
        <div id="GISMap" v-el:map></div>
    </div>
</template>

<script>
    import GoogleMaps from '../mixins/GoogleMaps.js';

    export default {
        mixins: [GoogleMaps],

        data() {
            return {
                initialLocation: ''
            }
        },

        events: {
            MapsApiLoaded: function(data) {
                this.$set('initialLocation', this.createInitialLocation(48.184845, 11.252553));
                initGISMap(this.$el.map, this.initialLocation);
            }
        }
}
</script>

现在我想将模板中定义的 id GISMap 传递给我的 initGISMap 函数，以便可以创建地图。但是如何正确传递这个标签呢？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

你可以使用 Vue 道具：http://vuejs.org/api/#props

<template>
  <div class="col-md-6">
    <div id="GISMap" :id="GISMap" v-el:map></div>
  </div>
</template>

然后在你的组件内部：

props: ['id'],

您可以通过方法访问它，就像访问数据属性一样。

例如：

console.log(this.id)

这将输出GISMap

【讨论】：