Question

作为一个简化的例子，假设你在一个名为“my-buttons”的组件中有这个：

<button v-for='item in items' v-on:click="this.$emit('activate', item)">
    <slot>{{ item.name }}</slot>
</button>

如果我在其他地方使用该组件，有没有办法覆盖插槽和访问item.name值？例如：

<my-component items="myItems">
    <span class="myspecialstuff">{{ item.name }}</span>
</my-component>

显然现在，vue会抱怨它在范围内找不到item。

Answer 1

UPDATE2：由于https://github.com/vuejs/vue/issues/2511，以下代码无效。我无法想到其他任何事情。遗憾。

更新：

要实现特定的插槽覆盖，请将插槽定义为

<button v-for='item in items' v-on:click="this.$emit('activate', item)">
    <slot v-bind:name="'item-'+item.name">{{ item.name }}</slot>
</button>

并覆盖为

<my-component items="myItems">
    //you have access to items so you can do this
    //specialItems is an array of items which are to be overriden
    <span class="myspecialstuff" v-for="item in specialItems" v-bind:slot="'item-'+item.name" >
        {{ item.name }}
    </span>
</my-component>

原始答案：这将是非常令人费解的imho。

根据<my-component获取items的位置，有两种方法可以实现您的目标。

items作为道具传递给my-component。（最常见的情况）。在这种情况下，您已经可以访问items并且无需为此跳过箍。
<my-component>通过某些外部来源（如表单或API）获得items。在这种情况下，您可以raise events to pass data或使用{{3} }通过.sync

插槽：访问范围变量

1 个答案: