ref的存在是方便父元件直接訪問子元件的一個工具。相當於一個id，比如：

<base-input ref="usernameInput"></base-input>
給這個子元件定義一個ref之後父元件想要訪問只需要輸入
this.$refs.usernameInput  就可以訪問到這個子元件
再比如：我要訪問到這個子元件裡的某個input框，那我只需要給對應的input也新增一個ref然後也可以使用這個方法來鎖定這個input
this.$refs.usernameInput.focus()
這個語句用相當於觸發了子元件中的focus()方法。

　　注：ref需要在元件渲染完成後才可用，並且不是響應式的，當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類似。