Vue中处理边界情况

一、访问元素&组件

1、访问根实例（在小Demo中适用）

• 通过$root访问根组件的数据、计算属性、方法。

2、访问父级组件实例

• $parent可以访问父组件的实例。它提供了一种机会，可以在后期随时触达父级组件，以替代将数据以 prop 的方式传入子组件的方式。

<google-map>
  <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
</google-map>

这个<google-map> 组件可以定义一个 map property，所有的子组件都需要访问它。在这种情况下<google-map-markers>可能想要通过类似 this.$parent.getMap 的方式访问那个地图，以便为其添加一组标记。

• 但是，这种访问模式在需要访问（父组件的父组件）与父组件中容易出问题

<google-map>
  <google-map-region v-bind:shape="cityBoundaries">
    <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
  </google-map-region>
</google-map>

那么在 <google-map-markers> 内部你可能发现自己需要一些类似这样的 hack：

var map = this.$parent.map || this.$parent.$parent.map

========>所以就在针对需要向任意更深层级的组件提供上下文信息时推荐依赖注入的原因。

3、访问子组件实例或子元素

• **通过ref为子组件赋予ID引用 **
• 然后就可以通过this.$refs调用

注意！：$refs只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

4、依赖注入

<google-map>
  <google-map-region v-bind:shape="cityBoundaries">
    <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
  </google-map-region>
</google-map>

在这个组件中，<google-map> 的后代都需要访问一个 getMap 方法，以便知道要跟哪个地图进行交互。但是，单纯的调用父组件$parent无法做到很好的扩展到更深层的组件。于是就要用到依赖注入，它用到了两个新的实例选项：provide 和 inject。

• provide 选项允许我们指定我们想要提供给后代组件的数据/方法。

所以可以把后代想要调用的方法放到provider中

provide: function () {
  return {
    getMap: this.getMap
  }
}

然后在任何后代组件，我们都可以通过inject选项来接收在我们想要添加到这个实例上的property

inject: ['getMap']

这个用法可以让我们在任意后代组件中访问 getMap，而不需要暴露整个 <google-map>实例。

• 于是可以把依赖注入当做“大范围使用的prop
  ”
  效果：

• 祖先组件不需要知道哪些后代组件使用它提供的 property
• 后代组件不需要知道被注入的 property 来自哪里

二、程序化的事件侦听器

• $emit可以被 v-on 侦听
• 通过 $on(eventName, eventHandler) 侦听一个事件
• 通过 $once(eventName, eventHandler) 一次性侦听一个事件
• 通过 $off(eventName, eventHandler) 停止侦听一个事件