Vue访问元素 & 组件的简单粗暴方式以及依赖注入

为何称其为简单粗暴方式呢？因为根据官方文档指示：在绝大多数情况下，我们最好不要触达另一个组件实例内部或手动操作 DOM 元素。

访问根实例

在每个 new Vue 实例的子组件中，其根实例可以通过 $root property 进行访问。

// Vue 根实例
new Vue({
  data: {
    foo: 1
  },
  computed: {
    bar: function () { /* ... */ }
  },
  methods: {
    baz: function () { /* ... */ }
  }
})

所有的子组件都可以将这个实例作为一个全局 store 来访问或使用。（对于 demo 或非常小型的有少量组件的应用来说这是很方便的。不过这个模式扩展到中大型应用来说就不然了。因此在绝大多数情况下，我们强烈推荐使用 Vuex 来管理应用的状态。）

// 获取根组件的数据
this.$root.foo

// 写入根组件的数据
this.$root.foo = 2

// 访问根组件的计算属性
this.$root.bar

// 调用根组件的方法
this.$root.baz()

访问父级组件实例

$parent property 可以用来从一个子组件访问父组件的实例。它提供了一种机会，可以在后期随时触达父级组件，以替代将数据以 prop 的方式传入子组件的方式。
在绝大多数情况下，触达父级组件会使得你的应用更难调试和理解，尤其是当你变更了父级组件的数据的时候。当我们稍后回看那个组件的时候，很难找出那个变更是从哪里发起的。

例如

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

设想一下我们添加一个新的 google-map-region 组件，当 google-map-markers 在其内部出现的时候，只会渲染那个区域内的标记：

<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

很快它就会失控。
这也是我们针对需要向任意更深层级的组件提供上下文信息时推荐依赖注入的原因。

访问子组件实例或子元素

尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。
1.为了达到这个目的，你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用。

<base-input ref="usernameInput"></base-input>

现在在你已经定义了这个 ref 的组件里，你可以使用如下代码来访问这个 base-input 实例，以便不时之需：

this.$refs.usernameInput

2.比如程序化地从一个父级组件聚焦这个输入框。在刚才那个例子中，该 base-input组件也可以使用一个类似的 ref 提供对内部这个指定元素的访问，例如：

<input ref="input">

甚至可以通过其父级组件定义方法：

methods: {
  // 用来从父级组件聚焦输入框
  focus: function () {
    this.$refs.input.focus()
  }
}

这样就允许父级组件通过下面的代码聚焦 base-input 里的输入框：

this.$refs.usernameInput.focus()

3.当 ref 和 v-for 一起使用的时候，你得到的 ref 将会是一个包含了对应数据源的这些子组件的数组。

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

依赖注入

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

定义说明：这对选项是一起使用的。以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

通俗的说就是：组件得引入层次过多，我们的子孙组件想要获取祖先组件得资源，那么怎么办呢，总不能一直取父级往上吧，而且这样代码结构容易混乱。这个就是这对选项要干的事情。

provide：是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。

inject：一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。from表示在可用的注入内容中搜索用的 key，default当然就是默认值。

const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: 'foo'
    }
  }
}

使用：
父组件或祖先组件里定义provide：

export default {
  name: "el-select",
  provide() {
    return {
      select: this
    };
  }
}

子组件或孙子组件中定义inject，这样子组件或孙子组件就可以引用父组件/祖父组件里的方法和属性了：

export default {
    name:'el-option',
    inject:['select'],
    created(){
      if(this.select.value===this.value){
        this.select.label=this.label;
      }
    }
}

相比 $parent 来说，这个用法可以让我们在任意后代组件中访问 getMap，而不需要暴露整个实例。这允许我们更好的持续研发该组件，而不需要担心我们可能会改变/移除一些子组件依赖的东西。同时这些组件之间的接口是始终明确定义的，就和 props 一样。

实际上，你可以把依赖注入看作一部分“大范围有效的 prop”，除了：

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

然而，依赖注入还是有负面影响的。它将你的应用以目前的组件组织方式耦合了起来，使重构变得更加困难。同时所提供的属性是非响应式的，父组件传值发生变化时，子组件接收的数据是不会对应改变的，如果需要响应传值可以考虑vuex

完整的例子：

<div id="app">
      <google-map>
        <google-map-marker v-bind:places="vueConfCities"></google-map-marker>
      </google-map>
    </div>

Vue.component("google-map", {
        provide: function() {
          return {
            getMap: this.getMap
          };
        },
        data: function() {
          return {
            map: null
          };
        },
        mounted: function() {
          this.map = new google.maps.Map(this.$el, {
            center: { lat: 0, lng: 0 },
            zoom: 1
          });
        },
        methods: {
          getMap: function(found) {
            var vm = this;
            function checkForMap() {
              if (vm.map) {
                found(vm.map);
              } else {
                setTimeout(checkForMap, 50);
              }
            }
            checkForMap();
          }
        },
        template: '<div class="map"><slot></slot></div>'
      });

      Vue.component("google-map-marker", {
        inject: ["getMap"],
        props: ["places"],
        created: function() {
          var vm = this;
          vm.getMap(function(map) {
            vm.places.forEach(function(place) {
              new google.maps.Marker({
                position: place.position,
                map: map
              });
            });
          });
        },
        render(h) {
          return null;
        }
      });