programing

vue2는 구성 요소의 $properties를 사용하여 상위 함수를 호출함

prostudy 2022. 5. 25. 22:18
반응형

vue2는 구성 요소의 $properties를 사용하여 상위 함수를 호출함

아동 구성 요소에서 부모 방법을 호출하려고 하는데 효과가 없는 것 같아여기서 암호:

인덱스.포인트

<div class="percorso"v-on:removeall="pathlengthTozero()">
</div>

구성 요소

Vue.component('lista-percorso', {
template:`
<div class="col-lg-2 col-xs-2">
    <div class="removeall pull-right" v-on:click="removeall()"></div>
</div>`,

    methods:{
    removeall : function(){
        this.listaSelezionati = [];
        this.$emit('removeall');
    }
}

모법

    pathlengthTozero : function(){
       il_tuo_percorso = [''];
    }

"pathlengthTozero"는 올바른 사용 방법인 배출에 호출되지 않은 것 같다.

이거 넣어야 돼.v-on:removeall="pathlengthTozero"구성 요소까지<lista-percorso>아래와 같이

<lista-percorso v-on:removeall="pathlengthTozero"></lista-percorso>

그리고this.$emit부모 방법을 해고할 수 있을 겁니다

샘플 데모:

Vue.component('lista-percorso', {
template:`
<div class="col-lg-2 col-xs-2">
    <div class="removeall pull-right" v-on:click="removeall()">xxxxxxxxxx</div>
</div>`,

    methods:{
    removeall : function(){
        this.listaSelezionati = [];
        this.$emit('removeall');
    }
  }
})



var App = new Vue({
  el: '#app',
  methods:{
    pathlengthTozero : function(){
      alert('hello'); 
      il_tuo_percorso = [''];
    }
  }
});
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div class="percorso" ></div>

  <lista-percorso v-on:removeall="pathlengthTozero"></lista-percorso>
</div>

이벤트 수신기를 어린이 제안자에게 사용해야 한다.

<div class="percorso">
    <lista-percorso v-on:removeall="pathlengthTozero"></lista-percorso>
</div>

참조URL: https://stackoverflow.com/questions/45371435/vue2-call-a-parent-function-using-emit-from-component

반응형