baidu / san

A fast, portable, flexible JavaScript component framework
https://baidu.github.io/san/
MIT License
4.72k stars 549 forks source link

条件渲染时,只给其中一个分支标记具名插槽,但其他分支也会被渲染进该具名插槽 #762

Closed sgnilo closed 1 year ago

sgnilo commented 1 year ago

如题

demo链接:https://codesandbox.io/s/beautiful-khayyam-vtr7fo?file=/src/index.js

errorrik commented 1 year ago

这不是一个 bug。 if-elif-else 是一个整体。如果想要你描述的效果,可以这样

const A = san.defineComponent({
    template: `
        <div>
            <div class="first-line">
                    <slot name="first" />
            </div>
            <div class="second-line">
                    <slot />
            </div>
        </div>
    `,
    initData: function () {
        return {};
    }
});

const B = san.defineComponent({
    components: {
        "c-a": A
    },
    template: `
        <c-a>
                <div s-if="cond" slot="first">我应该在第一行,是红色的</div>
                <div s-if="!cond">我应该在第二行,是绿色的</div>
        </c-a>
    `,
    initData() {
        return {};
    }
});