есть родительский компонент в через v-for перебираются дочерние компоненты, при событии в дочерном компоненте хочется передать какие-то данные из дочернего, а так же узнать в родительском в каком из детей произошло событие и взять данные сопутсвующие этому дочернему компоненту
Например из примера ниже: сейчас при клике на child // -> some-value а хочется // -> some-value и p.name
Vue.component('child', {
template: '<span @click="click" class="child">child</span>',
data: function () {
return {}
},
methods: {
click: function () {
this.$emit('customevent', 'some-value')
}
},
})
new Vue({
el: '#example',
data: {
ps: [
{'name': 'p1'},
{'name': 'p2'}
]
},
methods: {
customChildEvent: function (value) {
console.log(value)
// выведет some-value
// хочется чтобы сюда попало значение из нажатого "p"
}
}
})
.child {
color: blue;
cursor: pointer
}
.child:hover {
color: red;
}
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="example">
<div v-for="p in ps">
<p>
{{p.name}} +
<child @customevent="customChildEvent"></child>
</p>
</div>
</div>