Блог

Я использую vue vue-material для воспроизведения таблицы.

в документах vue-material я обнаружил, что рендеринг таблицы очень прост благодаря «слотам» в vue, найденным здесь в разделе «пользовательский шаблон», поэтому я попробовал использовать упрощенный пример, содержащий только имя возраст 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 и обнаружил, что в 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.

Я нашел место, где этот слот определен здесь на github vue-material, чтобы убедиться, что все будет настроено в соответствии с документацией 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-slot.

Я что-то упускаю?

Редактировать.:

версия vue 2.6.6 vue material 1.0.0.бета-версия-10.2

Я попытался настроить простой компонент, определяющий только слот (с тем же именем, также привязанный к :item), и подключил его, используя «новый» синтаксис — это сработало.

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"]
    }
}
  

Не имеет большого практического смысла, но это подтверждает, что моя установка может обрабатывать новый синтаксис, и он работает