slot-scope vue
<div id="app">
<input type="text" v-model="text" @keyup.enter="addItem">
<list :items="items" @delete="removeItem"></list>
<list :items="items" @delete="removeItem">
<template slot="item" scope="props">
<span @click="props.removeItem(props.index)">{{ props.item }}</span>
<button @click="removeItem(props.index)">X</button>
</template>
</list>
</div>
Vue.component('list', {
props: {
items: Array
},
methods: {
removeItem (index) {
this.$emit('delete', index)
}
},
template: `
<ul>
<li v-for="item, index in items">
<slot name="item" :item="item" :index="index" :removeItem="removeItem">
<span>Default slot: {{ item }} <button @click="$emit('delete', index)">X</button></span>
</slot>
</ul>
`
})
new Vue({
el: '#app',
data: {
text: '',
items: ['foo', 'bar']
},
methods: {
addItem () {
this.items.push(this.text)
this.text = ''
},
removeItem (index) {
this.items.splice(index, 1)
},
debug () {
debugger
}
}
})