• 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, 禁止转载 ️,侵权必究⚠️!


  • 相关阅读:
    Jmeter之写入测试结果到Excel文件
    jmeter之BeanShell 断言
    jmeter-csv数据文件设置之线程共享模式
    LoadRunner生成随机位数的字符串
    linux命令操作
    LoadRunner函数
    vi常用操作
    LoadRunner常见问题
    面试题库
    jmeter持续集成化(二)---jenkins+ant+jmeter
  • 原文地址:https://www.cnblogs.com/xgqfrms/p/15722326.html
Copyright © 2020-2023  润新知