广告位：访问范围变量

Question

As a simplified example suppose you have this in a component called "my-buttons":

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

If I use the component somewhere else, is there any way to override the slot and access the item.name value? For example:

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

Obviously as it stands now, vue will complain that it can not find item in the scope.

Answer 1

UPDATE2: the following code does not work due to https://github.com/vuejs/vue/issues/2511 . I can't think of anything else. sorry.

UPDATE:

To achieve specific slot overriding, define slots as

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

and override as

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

Original answer: that will be very convoluted imho.

there are 2 ways to achieve what you want depending on where <my-component is getting items .

1. items is passed to my-component as props. (most common case). In that case, you already have access to items and do not need to jump through hoops for it.

2. <my-component> is getting items through some external sources like a form or api.(less likely) in this case, you can either raise events to pass data or use 2-way bindings through .sync