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

1.依賴注入

會使用兩個實例選項：provide and 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
  }
})

2 $parent

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