상위 이벤트의 하위 구성 요소에서 함수를 호출하는 방법

상위 이벤트의 하위 구성 요소에서 함수를 호출하는 방법

맥락

Vue 2.0에서는 설명서와 기타 설명서에서 부모에서 자녀로의 커뮤니케이션이 소품을 통해 이루어짐을 명확히 보여주고 있습니다.

질문.

부모는 소품을 통해 아이에게 사건이 일어났다고 어떻게 말합니까?

벤트트 ?품 ?? ??? 않은 것 같기도 하고 않다.$emit/$on의

예

부모 컨테이너를 가지고 있는데 API에서 특정 액션을 수행해도 괜찮다고 자녀 컨테이너에 알려야 합니다.기능을 작동시킬 수 있어야 해요

요소에 a를 줍니다.ref를 사용합니다.$refs하위 구성요소의 메서드를 직접 호출합니다.

html:

<div id="app">
  <child-component ref="childComponent"></child-component>
  <button @click="click">Click</button>  
</div>

javascript:

var ChildComponent = {
  template: '<div>{{value}}</div>',
  data: function () {
    return {
      value: 0
    };
  },
  methods: {
    setValue: function(value) {
        this.value = value;
    }
  }
}

new Vue({
  el: '#app',
  components: {
    'child-component': ChildComponent
  },
  methods: {
    click: function() {
        this.$refs.childComponent.setValue(2.0);
    }
  }
})

자세한 내용은 참조의 Vue 설명서를 참조하십시오.

당신이 설명하고 있는 것은 부모 상태의 변화입니다.당신은 소품을 통해 아이에게 그것을 전달합니다.입니다만, ★★★★★★★★★★★★★★★★★★★★★★.watch가 부모에게 .emit그러면 부모가 상태를 다시 변경할 수 있습니다.

var Child = {
  template: '<div>{{counter}}</div>',
  props: ['canI'],
  data: function () {
    return {
      counter: 0
    };
  },
  watch: {
    canI: function () {
      if (this.canI) {
        ++this.counter;
        this.$emit('increment');
      }
    }
  }
}
new Vue({
  el: '#app',
  components: {
    'my-component': Child
  },
  data: {
    childState: false
  },
  methods: {
    permitChild: function () {
      this.childState = true;
    },
    lockChild: function () {
      this.childState = false;
    }
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
<div id="app">
<my-component :can-I="childState" v-on:increment="lockChild"></my-component>
<button @click="permitChild">Go</button>
</div>

이벤트를 자식에게 전달하려면 버스(Vue 인스턴스일 뿐)를 생성하여 자식에게 소품으로 전달하면 됩니다.

하시면 됩니다.$emit ★★★★★★★★★★★★★★★★★」$on@RoyJ 코드 :

html:

<div id="app">
  <my-component></my-component>
  <button @click="click">Click</button>  
</div>

javascript:

var Child = {
  template: '<div>{{value}}</div>',
  data: function () {
    return {
      value: 0
    };
  },
  methods: {
    setValue: function(value) {
        this.value = value;
    }
  },
  created: function() {
    this.$parent.$on('update', this.setValue);
  }
}

new Vue({
  el: '#app',
  components: {
    'my-component': Child
  },
  methods: {
    click: function() {
        this.$emit('update', 7);
    }
  }
})

실행 예: https://jsfiddle.net/rjurado/m2spy60r/1/

하위 컴포넌트에서 메서드를 호출하는 간단한 방법은 하위 컴포넌트에서 핸들러를 내보낸 다음 상위 컴포넌트에서 호출하는 것입니다.

var Child = {
  template: '<div>{{value}}</div>',
  data: function () {
    return {
      value: 0
    };
  },
  methods: {
  	setValue(value) {
    	this.value = value;
    }
  },
  created() {
    this.$emit('handler', this.setValue);
  }
}

new Vue({
  el: '#app',
  components: {
    'my-component': Child
  },
  methods: {
  	setValueHandler(fn) {
    	this.setter = fn
    },
    click() {
    	this.setter(70)
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id="app">
  <my-component @handler="setValueHandler"></my-component>
  <button @click="click">Click</button>  
</div>

부모는 필요에 따라 자녀 핸들러의 기능과 호출을 추적합니다.

를 사용한 이벤트 버스 접근법이 마음에 들지 않았다.$on , 아이 바인딩, 아이 ('create?그 다음?create를 하고 있습니다)vue-router 번 마다 여러 는 메시지핸들러를 여러 번 바인드하여 메시지마다 여러 응답이 발생합니다.

부모로부터 자녀에게 소품을 물려주고 자녀에게 부동산 감시인을 두는 정통적인 해결책은 조금 더 효과가 있었다.유일한 문제는 아이가 가치의 전환에만 행동할 수 있다는 것이다.같은 메시지를 여러 번 전달하는 것은 아이가 거스름돈을 받을 수 있도록 강제로 전환하기 위한 일종의 부기가 필요하다.

메시지를 배열로 줄바꿈하면 값이 같은 경우에도 항상 하위 워처가 트리거된다는 것을 알 수 있습니다.

부모:

{
   data: function() {
      msgChild: null,
   },
   methods: {
      mMessageDoIt: function() {
         this.msgChild = ['doIt'];
      }
   }   
   ...
}

아이:

{
   props: ['msgChild'],
   watch: {
      'msgChild': function(arMsg) {
         console.log(arMsg[0]);
      }
   }
}

HTML:

<parent>
   <child v-bind="{ 'msgChild': msgChild }"></child>
</parent>

시간이 있는 경우 Vuex 저장소를 사용하여 변수를 감시하거나(일명 상태), 액션을 직접 트리거(일명 디스패치)합니다.

다음 예시는 자체 설명입니다.여기서 참조 및 이벤트를 사용하여 부모 및 자녀 간에 함수를 호출할 수 있습니다.

// PARENT
<template>
  <parent>
    <child
      @onChange="childCallBack"
      ref="childRef"
      :data="moduleData"
    />
    <button @click="callChild">Call Method in child</button>
  </parent>
</template>

<script>
export default {
  methods: {
    callChild() {
      this.$refs.childRef.childMethod('Hi from parent');
    },
    childCallBack(message) {
      console.log('message from child', message);
    }
  }
};
</script>

// CHILD
<template>
  <child>
    <button @click="callParent">Call Parent</button>
  </child>
</template>

<script>
export default {
  methods: {
    callParent() {
      this.$emit('onChange', 'hi from child');
    },
    childMethod(message) {
      console.log('message from parent', message);
    }
  }
}
</script>

부모에서 자식 구성 요소를 호출하고 있습니다.

<component :is="my_component" ref="my_comp"></component>
<v-btn @click="$refs.my_comp.alertme"></v-btn>

하위 구성 요소

mycomp.vue

    methods:{     
    alertme(){
            alert("alert")
            }
    }

아이의 방법을 사용하는 부모의 필요성에 대해 생각해 볼 필요가 있다고 생각합니다.사실 부모는 자녀의 방법을 걱정할 필요는 없지만 자녀 구성 요소를 FSA(Finite State Machine)로 취급할 수 있다.하위 구성 요소의 상태를 제어하는 상위 구성 요소.따라서 상태 변화를 감시하거나 컴퓨팅 기능만 사용하는 것으로 충분합니다.

부모에서 부울 프로포트를 전환하여 자녀에게 이벤트 전송을 시뮬레이트할 수 있습니다.

부모 코드:

...
<child :event="event">
...
export default {
  data() {
    event: false
  },
  methods: {
    simulateEmitEventToChild() {
      this.event = !this.event;
    },
    handleExample() {
      this.simulateEmitEventToChild();
    }
  } 
}

자코드:

export default {
  props: {
    event: {
      type: Boolean
    }
  },
  watch: {
    event: function(value) {
      console.log("parent event");
    }
  }
}

키를 사용하여 하위 구성 요소를 다시 로드할 수 있습니다.

<component :is="child1" :filter="filter" :key="componentKey"></component>

새 필터로 구성 요소를 다시 로드하려면 버튼을 클릭하면 하위 구성 요소가 필터링됩니다.

reloadData() {            
   this.filter = ['filter1','filter2']
   this.componentKey += 1;  
},

필터를 사용하여 기능을 트리거합니다.

언급URL : https://stackoverflow.com/questions/42632711/how-to-call-function-on-child-component-on-parent-events