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, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/15722326.html
未经授权禁止转载,违者必究!