引用外部自己开发的umd组件无法加载uni-app插槽中的默认内容
引用外部自己开发的umd组件无法加载uni-app插槽中的默认内容
操作步骤:
- 如上所述必现
预期结果:
- 可以正常解析
<slot>
中的默认内容
实际结果:
- 无法解析slot中的默认内容,
- 目前可以用私服更改
/@dcloudio/vue-cli-plugin-uni/packages/h5-vue/
的代码解决
Bug描述:
<template>
<div>
<slot name="name1">
<!--该内容不会显示 -->
<div class="test">
默认信息
</div>
</slot>
</div>
</template>
原因是构建后插槽的fallback是个方法
[t._t("name1",(function(){return[n("div",{staticClass:"test"},["默认信息"],1)]})))]
在dcloud的renderSlot中
//node_modules/@dcloudio/vue-cli-plugin-uni/packages/h5-vue/dist
function renderSlot (
name,
fallback,
props,
bindObject
) {
var scopedSlotFn = this.$scopedSlots[name];
var nodes;
if (scopedSlotFn) { // scoped slot
props = props || {};
if (bindObject) {
if ( true && !isObject(bindObject)) {
warn(
'slot v-bind without argument expects an Object',
this
);
}
props = extend(extend({}, bindObject), props);
}
// fixed by xxxxxx app-plus scopedSlot
nodes = scopedSlotFn(props, this, props._i) || fallback;
} else {
//fallback这里没有做类型判断,如果是在当前项目中的自定义插槽,fallback是一个vNode,但外部的组件这里是一个function
nodes = this.$slots[name] || fallback;
}
...
}
这是vue-template-compiler中的
function renderSlot(name, fallbackRender, props, bindObject) {
const scopedSlotFn = this.$scopedSlots[name];
let nodes;
if (scopedSlotFn) {
// scoped slot
props = props || {};
if (bindObject) {
if (process.env.NODE_ENV !== 'production' && !isObject(bindObject)) {
warn$2('slot v-bind without argument expects an Object', this);
}
props = extend(extend({}, bindObject), props);
}
nodes =
scopedSlotFn(props) ||
(isFunction(fallbackRender) ? fallbackRender() : fallbackRender);
} else {
//对比@dcloudio/vue-cli-plugin-uni中的renderSlot多了类型判断
nodes =
this.$slots[name] ||
(isFunction(fallbackRender) ? fallbackRender() : fallbackRender);
}
...
}
更多关于引用外部自己开发的umd组件无法加载uni-app插槽中的默认内容的实战教程也可以访问 https://www.itying.com/category-93-b0.html