ref和依赖注入

ref的存在是方便父组件直接访问子组件的一个工具。相当于一个id，比如：

<base-input ref="usernameInput"></base-input>
给这个子组件定义一个ref之后父组件想要访问只需要输入
this.$refs.usernameInput  就可以访问到这个子组件
再比如：我要访问到这个子组件里的某个input框，那我只需要给对应的input也添加一个ref然后也可以使用这个方法来锁定这个input
this.$refs.usernameInput.focus()
这个语句用相当于触发了子组件中的focus()方法。

　　注：ref需要在组件渲染完成后才可用，并且不是响应式的，当 ref 和 v-for 一起使用的时候，你得到的 ref 将会是一个包含了对应数据源的这些子组件的数组。

依赖注入：

　　　　这个是为了方便子组件多次调用一个父组件的内容来用，虽然可以使用parent方法，但是嵌套下去还是容易出错且维护困难。

它用到了两个新的实例选项：provide 和 inject。

这里是一个官网给的完整实例

 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;
        }
      });

由实例可以看出，provide 和data，methods...处于同一级别，而inject在使用的时候也和props类似。