1

есть родительский компонент в через 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>

2 ответа 2

2

Родитель не получает потомков, как и потомок родителя; это часть философии Vue.js ради модульности.
Если идентификация всё же необходима (повод пересмотреть связность) - можно передать имя потомку и нужно чтобы он его возвращал:

Vue.component('child', {
  props: ["name"],
  template: '<span @click="click" class="child">child</span>',
  data: function () {
    return {}
  },
  methods: {
    click: function () {
        // this.name - переданное родителем свойство
    	this.$emit('customevent', 'some-value', this.name)
    }
  },
})

new Vue({
  el: '#example',
  data: {
    ps: [
    	{'name': 'p1'},
    	{'name': 'p2'}
    ]
  },
  methods: {
    customChildEvent: function (value, name) {
      console.log(value, name); // eg, "some-value", "p1"
    }
  }
})
.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" :name="p.name"></child>
    </p>
  </div>
</div>

2
  • повод пересмотреть связность - Vuex? 6 апр 2017 в 11:07
  • @ЖалгасАжибаев, как вариант.
    – user207618
    6 апр 2017 в 11:12
1

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 (data) {
      console.log('name', data.name)
      console.log('value', data.value)
    }
  }
})
.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({name: p.name, value: $event})"></child>
    </p>
  </div>
</div>

1
  • @Other, как вам такой вариант, здесь можно не передавать имя потомку, а главное РАБОТАЕТ! )))) 8 апр 2017 в 13:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.