javascript - 范围内的组件冲突

我试图抽象一个google places自动完成输入组件，以便多次使用它。
但是，当我实例化以下组件中的1个以上时，数据和方法会重叠。（记录相同的place）

<template>
  <input :ref="inputRef" type="text">
</template>

<script>
var autocompleteInput

export default {
  props: ['inputRef'],
  methods: {
    fetchAddress() {
      var place = autocompleteInput.getPlace();
      console.log(place)
    }
  },
  mounted() {
    autocompleteInput = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */(this.$refs[this.inputRef]),
    {types: ['address']});
    autocompleteInput.addListener('place_changed', this.fetchAddress);
    console.log(this.$refs[this.inputRef])
  }
}
</script>

我的猜测是var autocompleteInput是个问题，因为它似乎超出了范围。
但是我不知道如何缩小范围。
我该怎么解决？

最佳答案

你是对的。组件只创建/定义一次，因此只有一个autocompleteInput。
将其设置为data属性以将其与每个呈现实例隔离

data () {
  return {
    autocompleteInput: null
  }
}

并通过方法/生命周期挂钩中的this.autocompleteInput引用它。