VUE2 하위에서 상위로 매개 변수 전달

VUE2 하위에서 상위로 매개 변수 전달

어떻게 하면 자식에서 부모로 매개 변수를 적절하게 전달할 수 있을까?여기 내가 한 일이 있다.

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' 매개 변수가 인식되지 않는 것 같다.

사실 거의 다 왔는데, 유일한 문제는 인라인 사용자 지정 이벤트 핸들러에 사용한 쓰기 스타일이야.

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

vue는 vue 인스턴스에서 x, y 및 선택된 변수를 찾을 것이다(this.x...). 예를 들어 정의하지 않았으므로 오류가 발생함.
이 문제를 해결하기 위한 3가지 해결책이 있다.

1. 제일 쉬운 거.그냥 이렇게 메소드 이름만 넘기면 돼.
   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>

2. 여러분은 또한 여러분의 주장을 개체로 포장할 수 있다.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>

3. 꼭 지키라고 고집한다면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>

참조URL: https://stackoverflow.com/questions/45523363/vue2-passing-parameter-from-child-to-parent