Javascript 范围中的冲突组件

我试图抽象一个GooglePlaces自动完成输入组件，以便多次使用它

但是，当我实例化以下组件中的多个组件时，数据和方法会重叠。（记录相同的

位置

）

var自动完成输入
导出默认值{
道具：['inputRef']，
方法：{
fetchAddress（）{
var place=autocompleteInput.getPlace（）；
控制台日志（位置）
}
},
安装的（）{
autocompleteInput=new google.maps.places.Autocomplete(
/**@type{！HTMLInputElement}*/（this.$refs[this.inputRef]），
{types:['address']}）；
autocompleteInput.addListener（'place\u changed'，this.fetchAddress）；
console.log（this.$refs[this.inputRef]）
}
}

我的猜测是，

var autocompleteInput

是问题所在，因为它似乎超出了范围

然而，我不知道如何缩小范围

---

我如何解决这个问题？

你说得对。组件将只创建/定义一次，因此只有一个

自动完成输入

将其设置为

data

属性，以将其与每个渲染实例隔离

data () {
  return {
    autocompleteInput: null
  }
}

---

并通过方法/生命周期挂钩中的

this.autocompleteInput

引用它。

就是这样做的。谢谢基础的力量。

data () {
  return {
    autocompleteInput: null
  }
}