Vuejs2 vue材质表不适用于v插槽语法

我正在使用vue+vue材质来绘制表格

在我发现的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>

其中，

names

通过AppWrapper中的属性提供：

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

嗨{{content}

...
数据（）=>{
返回{
姓名：[“爱丽丝”、“鲍勃”]
}
}

---

没有太多实际意义，但它验证了我的设置可以处理新语法，并且可以正常工作。。。您是否正在使用Vue 2.6+？这适用于任何加载程序（例如

vue loader

），我使用的是vue 2.6.6，vue material 1.0.0-beta-10.2，考虑到新语法的责任在消费者身上（即您的代码），这看起来非常奇怪。讨论中的组件不需要更改任何内容。是你吗？我认为这是vue material提供的编译代码的问题。这可能与此Vue问题有关~可能的解决方法是导入

src

组件，而不是导入

dist

组件。或者现在继续使用

插槽范围

。要问这个问题。。。您是否正在使用Vue 2.6+？这适用于任何加载程序（例如

vue loader

），我使用的是vue 2.6.6，vue material 1.0.0-beta-10.2，考虑到新语法的责任在消费者身上（即您的代码），这看起来非常奇怪。讨论中的组件不需要更改任何内容。是你吗？我认为这是vue material提供的编译代码的问题。这可能与此Vue问题有关~可能的解决方法是导入

src

组件，而不是导入

dist

组件。或者现在继续使用

slot scope

。

 <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>

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

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