Question

我正在使用vue + vue材料显示一张桌子。

在我发现的vue资料文档中，由于vue found here at "custom template"中的“槽”，呈现表格非常容易-因此我举了一个简化的示例，仅显示名称和年龄为2个人

<template>
        <md-table v-model="people">
            <md-table-row slot="md-table-row" slot-scope="{ item }">
                <md-table-cell md-label="name">{{ item.name }}</md-table-cell>
                <md-table-cell md-label="age">{{ item.age }}</md-table-cell>
            </md-table-row>
        </md-table>
</template>

<script>
    export default {
        name: 'app',
        data: () => {
            return {
                people: [
                    {name: "Alice", age: 22},
                    {name: "Bob", age: 21}
                ]
            }
        },
    }
</script>

请客。然后，我在vue文档上查找了广告位，发现scoped slots on vue 2.6+有新语法。所以自然地我想尝试一下：

<template>
        <md-table v-model="people">
            <md-table-row v-slot:md-table-row="{ item }">
                <md-table-cell md-label="name">{{ item.name }}</md-table-cell>
                <md-table-cell md-label="age">{{ item.age }}</md-table-cell>
            </md-table-row>
        </md-table>
</template>

这不会呈现表，也不会将任何错误记录到javascript控制台。

我在vue材质的github上找到了在here上定义此插槽的位置，以验证是否将根据vue文档进行设置：

 <tbody v-else-if="value.length">
          <md-table-row-ghost
            v-for="(item, index) in value"
            :key="getRowId(item, mdModelId)"
            :md-id="getRowId(item, mdModelId)"
            :md-index="index"
            :md-item="item">
            <slot name="md-table-row" :item="item" />
          </md-table-row-ghost>
        </tbody>

是的，设置了slot name，并且也存在v-bind:item="item"，据我所知，这应该适用于新的v槽语法。

我想念什么吗？

编辑。：

vue版本2.6.6 vue材料1.0.0.beta-10.2

我尝试设置一个简单的组件，该组件仅定义了一个插槽（相同的名称，也绑定到：item），并使用“ new”语法将其连接起来-可以。

appSlot：

<template>
    <div>
              <div v-for="name in names" :key="name">
                  <slot name="red-scope"
                        :content="name">
                  </slot>
              </div>
    </div>
<template>

其中names来自AppWrapper的属性：

<template>
    <AppSlot :names="names">
        <template #red-scope="{ content }">
            <p>hi {{content}}</p>
        </template>
    </AppSlot>
</template>
...
data() => {
    return {
        names: ["Alice", "Bob"]
    }
}

没什么实际意义，但是它可以验证我的设置可以处理新语法并且可以正常工作

VUE材质表不适用于V槽语法

0 个答案: