VUE2 передача параметра от дочернего к родительскому

Question

VUE2 передача параметра от дочернего к родительскому

1

как правильно передать параметр из дочернего элемента в родительский с функцией $ emit? вот что я сделал

HTML

<lista-servizi-gialla :servizi="modello" v-on:centramappa="mappaCenter(x,y,selected)"></lista-servizi-gialla>

СОСТАВНАЯ ЧАСТЬ

template'
<span class="pull-right forward"
 v-on:click="centraNellaMappa(single.x,single.y,single.selected)"></span>',

methods:{
    centraNellaMappa : function(x,y,selected){
        this.$emit('centramappa',[x],[y],[selected]);
     }  
}

ФУНКЦИЯ РОДИТЕЛЯ

mappaCenter : function(x,y,selected){
    alert(x);
}

параметр 'x', кажется, не распознается

Pds Ink 05 авг. 2017, в 17:23

Источник

Теги:

javascript

vuejs2

1 ответ

Ещё вопросы

choasia · Accepted Answer · 2017-08-06T00-53-00.000Z

На самом деле вы почти там, единственная проблема - стиль записи, который вы использовали для встроенного обработчика пользовательских событий.

v-on:centramappa="mappaCenter(x,y,selected)"

vue будет искать x, y и выбранные переменные в экземпляре vue (this.x...). Поскольку вы не определили их в своем экземпляре, были сброшены ошибки.
Итак, у вас есть 3 решения для решения этой проблемы.

Самый простой. Вы можете просто передать имя метода, как это.
v-on:centramappa="mappaCenter"
vue будет автоматически соответствовать методу и передать вам аргументы. См. Демонстрацию ниже.

Vue.component('lista-servizi-gialla', {
  template: '
<span class="pull-right forward"
 v-on:click="centraNellaMappa(3, 5, true)">
test 
</span>
  ',
  methods:{
    centraNellaMappa : function(x, y, selected) {
      this.$emit('centramappa', [x], [y], [selected]);
    }  
  }
});

new Vue({
  el: '#app',
  methods: {
    mappaCenter: function(x, y, selected){
      //alert(x);
      console.log('x: ${x}, y: ${y}, selected: ${selected}');
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<lista-servizi-gialla v-on:centramappa="mappaCenter"></lista-servizi-gialla>
</div>

Вы также можете обернуть свои аргументы в объект. Vue предоставляет специальную переменную с именем $event, ее значение будет установлено как первый аргумент, который вы передали в событии $emit.
v-on:centramappa="mappaCenter($event)"
См. Демонстрацию ниже.

Vue.component('lista-servizi-gialla', {
  template: '
<span class="pull-right forward"
 v-on:click="centraNellaMappa(3, 5, true)">
test 
</span>
  ',
  methods:{
    centraNellaMappa : function(x, y, selected) {
      this.$emit('centramappa', {x, y, selected});
    }  
  }
});

new Vue({
  el: '#app',
  methods: {
    mappaCenter: function({ x, y, selected }){
      //alert(x);
      console.log('x: ${x}, y: ${y}, selected: ${selected}');
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<lista-servizi-gialla v-on:centramappa="mappaCenter($event)"></lista-servizi-gialla>
</div>

Если вы настаиваете на сохранении метода mappaCenter в текущей форме, вы можете использовать переменную аргументов, определенную в спецификации JavaScript.
v-on:centramappa="mappaCenter(...arguments)"
или же
v-on:centramappa="mappaCenter(arguments[0], arguments[1], arguments[2])"
См. Демонстрационную версию ниже и проверьте этот ответ для получения дополнительной информации.

Vue.component('lista-servizi-gialla', {
  template: '
<span class="pull-right forward"
 v-on:click="centraNellaMappa(3, 5, true)">
test 
</span>
  ',
  methods:{
    centraNellaMappa : function(x, y, selected) {
      this.$emit('centramappa', [x], [y], [selected]);
    }  
  }
});

new Vue({
  el: '#app',
  methods: {
    mappaCenter: function(x, y, selected){
      //alert(x);
      console.log('x: ${x}, y: ${y}, selected: ${selected}');
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<lista-servizi-gialla v-on:centramappa="mappaCenter(arguments[0], arguments[1], arguments[2])"></lista-servizi-gialla>
</div>

Спасибо, мужик! второй вариант кажется мне наиболее универсальным, документация не очень ясна по этому вопросу
@PdsInk Да, это может быть немного неясным.