vue provide inject 作用域测试,多个provide 同名覆盖

vue provide inject 作用域测试,多个provide 同名覆盖?

https://codesandbox.io/s/vue-inject-array-vs-inject-object-all-in-one-fslsf

      // parent
      Vue.component("google-map", {
        provide: function () {
          return {
            getMap: this.getMap,
            mapLog: this.mapLog
          };
        },
        data: function () {
          return {
            map: null
          };
        },
        mounted: function () {
          this.map = new google.maps.Map(this.$el, {
            center: { lat: 0, lng: 0 },
            zoom: 1
          });
        },
        methods: {
          mapLog: function (str) {
            console.log(`\n${str} =`, str);
          },
          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>'
      });
      // child
      Vue.component("google-map-marker", {
        inject: ["getMap", "mapLog"],
        // inject: {
        //   getMap: "getMap",
        //   mapLog: "mapLog"
        // },
        props: ["places"],
        created: function () {
          var vm = this;
          // vm.mapLog("inject array vs inject object");
          vm.mapLog("inject array");
          // vm.mapLog("inject object");
          vm.getMap(function (map) {
            vm.places.forEach(function (place) {
              new google.maps.Marker({
                position: place.position,
                map: map
              });
            });
          });
        },
        render(h) {
          return null;
        }
      });

shit code


export default {
    name: 'CustomFilter',
    inject: {
        parentCustomConfig: 'customConfig',
        parentFilterData: 'filterData',
    },
    computed: {
        customConfig () {
            return this.parentCustomConfig();
        },
        filterData () {
            return this.parentFilterData();
        },
     },
};
      

refs

https://www.cnblogs.com/xgqfrms/p/15667062.html



©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!

原创文章,版权所有©️xgqfrms, 禁止转载 ️,侵权必究⚠️!


原文地址:https://www.cnblogs.com/xgqfrms/p/15722326.html