Vue.js refs 疑惑大揭秘：mapRef 消失之谜

2024-03-05 12:45:52

Vue.js refs 的世界：揭秘 mapRef 的神秘消失

作为一名资深程序员和技术作家，我一直致力于帮助开发人员解决复杂的技术难题。今天，我们一起踏入 Vue.js refs 的奇妙世界，揭开困扰许多人的 mapRef 神秘消失之谜。

问题：mapRef 消失不见

在 Vue.js 中，refs 扮演着至关重要的角色，允许我们轻松操作组件实例。然而，在某些情况下，你会发现非根组件中的 refs，例如 mapRef，似乎消失了，令人困惑不已。

根源：代理绑定

理解这个问题的关键在于模板编译和 ref 绑定的过程。当 Vue 编译模板时，它会将 refs 转换为实例属性，以便我们通过 this.$refs 访问它们。但是，当我们使用非根组件（即嵌套在其他组件内的组件）时，这个过程会发生一个小小的变化。

在非根组件中，refs 会被代理绑定到父级作用域中。这意味着，当你访问 this.$refs 时，它实际上指向的是父级作用域中创建的代理属性，而不是组件实例本身的 refs 属性。

mapRef 的神秘消失

回到我们的例子，Gmap 组件是一个非根组件，因此 mapRef ref 在 Gmap 实例中无法直接通过 this.$refs 访问。相反，它被代理绑定到了父级作用域中。所以，当你尝试访问 self.$refs.mapRef 时，你实际上是在访问父级作用域中创建的代理属性，该属性在 Gmap 实例中不存在，导致返回 undefined。

解决方案：.proxy 的力量

Vue 提供了一个简单而有效的解决方案：.proxy 属性。它允许我们在非根组件中直接访问实例 refs。因此，在我们的例子中，我们可以使用以下代码来获取 mapRef 的值：

mounted() {
  let self = this
  console.log(self.$refs) // 显示 mapRef 对象引用
  console.log(self.$refs.mapRef) // 仍然返回 undefined ???
  console.log(self.$refs.mapRef.$proxy) // 恭喜！mapRef 对象
}