插槽：访问范围变量

Question

作为一个简单的例子假设你在一个名为“我的-按钮”部分有这样的：

<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。我想不出别的什么。抱歉。

UPDATE：

为了实现特定插槽压倒一切的，定义插槽，

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

原来的答复： 那会很费解恕我直言。

有两种方法可以达到你想要的效果，这取决于<my-component在哪里得到items。

1. items作为道具传递给my-component。 （最常见的情况）。在这种情况下，您已经可以访问items，并且不需要为此跳过。

2. <my-component>通过像表格或API一些外部资源越来越items。（不太可能）在这种情况下，您可以raise events to pass data或使用2-way bindings通过.sync