账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue-cli使用webpack动态注册组件后无法使用slot无法实现内容分发
    64
    0
    • 使用webpack动态注册组件后无法使用slot无法实现内容分发
    • 单独的注册组件是没有问题的,问题不知道出在哪里
    • 以下为webpack动态注册组件代码
    import Vue from "vue";
    
    function capitalizeFirstLetter(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }
    
    const requireComponent = require.context(
        ".",
        true,
        /\.vue$/
    );
    
    requireComponent.keys().forEach(fileName => {
        console.log(`${fileName.substring(fileName.lastIndexOf("/")  + 1).replace(/\.\w+$/, "")}      路径:'${fileName}'`);
        const componentConfig = requireComponent(fileName);
        const componentName = capitalizeFirstLetter(
            fileName.substring(fileName.lastIndexOf("/")  + 1).replace(/\.\w+$/, "")
        );
        Vue.component(componentName, componentConfig.default || componentConfig);
    });
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 元旦2号 普通会员 1楼

      在 Vue.js 中,当你使用 @import 或者 @ slots 动态注册组件时,通常需要在 template 或者 script 文件中使用组件的 slots。但是,如果你在 webpack 中动态注册组件,但是使用了 slots,你可能会遇到无法在浏览器中正常渲染的问题。

      首先,你需要确保你在使用 slots 时,组件的 template 和 script 中包含了需要的 slots。例如,如果你需要在 script 中使用一个 slot,你需要在 template 中使用 slots 标签。如果你需要在 template 中使用多个 slots,你需要在 template 中使用 slots 标签,然后在 script 中为每个 slots 分配一个 slotId。

      如果你在使用 @import 或者 @ slots 动态注册组件时,但使用了 slots,那么你可能需要在模板或者 script 中为每个 slot 分配一个 slotId。然后,你可以使用 webpack 的插件 vue-styleguidist-component注册组件,这样你就可以在 webpack 中动态注册组件,但是同时使用 slots。

      总的来说,如果你在使用 @import 或者 @ slots 动态注册组件时,但是使用了 slots,那么你可能需要在模板或者 script 中为每个 slot 分配一个 slotId,然后在 webpack 中使用 vue-styleguidist-component注册组件,这样你就可以在 webpack 中动态注册组件,但是同时使用 slots。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部