slot 动态命名示例

[textqaz]

san 文档中slot 动态命名示例
替换MyComponent template内代码

<b slot="col-name">{{row.name}}</b> 

为

 <fragment s-for="col, index in columns"> <b slot="col-{{col.name}}" key="{{index}}">{{row.name}}</b> </fragment>

最终dom节点无法渲染出b标签、求解答。

完整代码如下：

   var Table = san.defineComponent({
        template: ''
            + '<table>'
            +   '<thead><tr><th s-for="col in columns">{{col.label}}</th></tr></thead>'
            +   '<tbody>'
            +     '<tr s-for="row in datasource">'
            +       '<td s-for="col in columns">'
            +         '<slot name="col-{{col.name}}" var-row="row" var-col="col">{{row[col.name]}}</slot>'
            +       '</td>'
            + '    </tr>'
            +   '</tbody>'
            + '</table>'
    });

    var MyComponent = san.defineComponent({
        components: {
            'x-table': Table
        },

        template: ''
            + '<div>'
            +   '<x-table columns="{{columns}}" datasource="{{list}}">'
            +     '<fragment s-for="col, index in columns"> <b slot="col-{{col.name}}" key="index">{{row.name}}</b> </fragment>'
            // +     '<b slot="col-name">{{row.name}}</b>'
            +   '</x-table>'
            + '</div>'

    });
    var myComponent = new MyComponent({
        data: {
            columns: [
                {name: 'name', label: '名'},
                {name: 'email', label: '邮'}
            ],
            list: [
                {name: 'errorrik', email: '[email protected]'},
                {name: 'leeight', email: '[email protected]'}
            ]
        }
    });
    myComponent.attach(document.body);

[Lohoyo]

你是想要实现全部加粗吗？是的话，可以把
<fragment s-for="col, index in columns"> <b slot="col-{{col.name}}" key="{{index}}">{{row.name}}</b> </fragment>
换成
<b slot="col-name">{{row.name}}</b> <b slot="col-email">{{row.email}}</b>

[textqaz]

表格的列数是不固定的呀，可能是两列，也可能是十列。

[Lohoyo]

那把 b 标签写在 Table 组件里能满足你的需求吗？
<slot name="col-{{col.name}}" var-row="row" var-col="col"><b>{{row[col.name]}}</b></slot>

[textqaz]

不对 我想写在外面是因为我还要根据columns的不同列 去渲染不同的组件。比如在columns数组每项加一个type属性 取值可以input 或者checkbox 根据这个type来渲染表格的内容。

[errorrik]

对于一个内部声明了 <slot> 的组件，比如例子中的 Table；在使用时，是用使用声明中的直接 children，去插入 Table 内部对应 <slot> 处。

拿下面的代码例子来说，被插入 <slot> 的，是 fragment 和 u，而不是 b。

<x-table columns="{{columns}}" datasource="{{list}}">'
    <fragment s-for="col, index in columns">
        <b slot="col-{{col.name}}" key="index">{{row.name}}</b>
    </fragment>
    <u slot="col-xxx">{{row.name}}</u>
</x-table>

这是符合标准对 slot 行为定义的

[textqaz]

如果修改成这样，是否可以循环渲染出 b，实测是失效的，求指导。

<x-table columns="{{columns}}" datasource="{{list}}">'
    <b  s-for="col, index in columns" slot="col-{{col.name}}" key="index">{{row.name}}</b>
    <u slot="col-xxx">{{row.name}}</u>
</x-table>

[errorrik]

也不行。 b[s-for,slot] 是一个 node，是一个 for-node。在渲染时，它有很多items。

• 假设 b 只有 s-for，它会被插入到 no-named slot 中。
• b 定义了 slot="col-{{col.name}}"，它作为一个 for-node，data 中只有 columns，没有 col。所以slot="col-undefined"，没有对应的 <slot name="col-undefined" 被定义过。所以没地方插入
• 额外说一句，col 是 items 的 data，对于 for-node 来说，它是不知道的

[errorrik]

根据columns的不同列 去渲染不同的组件。比如在columns数组每项加一个type属性 取值可以input 或者checkbox 根据这个type来渲染表格的内容

至于这个需求，其实并不难实现：

• scoped-slot 能够实现让 slot 拿到数据，根据数据的不同就有选择不同视图的可能
• 组件本身就是视图与行为的封装

所以，Table 组件本身使用 default scoped-slot 声明就行

var Table = san.defineComponent({
    template: `
        <table>
            <thead><tr><th s-for="col in columns">{{col.label}}</th></tr></thead>
            <tbody>
                <tr s-for="row in datasource">
                <td s-for="col in columns">
                    <slot var-row="row" var-col="col">{{row[col.name]}}</slot>
                </td>
                </tr>
            </tbody>
        </table>
    `
});

在使用的时候，通过 s-is 来动态选择组件。 https://baidu.github.io/san/tutorial/component/#动态子组件

<x-table columns="{{columns}}" datasource="{{list}}">'
    <s-cmpt s-is="col.type" col-data="{{col}}" row-data="{{row}}" />
</x-table>