3***@qq.com
3***@qq.com
  • 发布:2025-02-10 15:35
  • 更新:2025-02-10 15:35
  • 阅读:17

【报Bug】引用外部自己开发的umd组件无法加载插槽中的默认内容

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: sequoia 15.2 (24C101)

浏览器平台: Chrome

浏览器版本: 131.0.6778.266

项目创建方式: CLI

CLI版本号: 5.0.8

操作步骤:

如上所述必现

预期结果:

可以正常解析<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);  
    }  
    ...  
}
2025-02-10 15:35 负责人:无 分享
已邀请:

要回复问题请先登录注册