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
未经授权禁止转载,违者必究!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
2020-12-23 CSS Grid & Flex poster PDF 海报定制 All In One
2020-12-23 H5 CSS 悬浮滚动条 All In One
2020-12-23 JavaScript convert ES6 Map to Array All In One
2020-12-23 CSS hover box
2020-12-23 v-for & for...in vs for...of All In One
2020-12-23 CSS 检测 IE 浏览器
2020-12-23 CSS 滚动条宽度 All In One