Vue $emit()가 상위 구성 요소 메서드를 트리거할 수 없는 이유 및 해결
만약 수정한 후에도 여전히 안 된다면 바꾸어라.
this.$parent.Event(Event가 상위 어셈블리의 사용자 정의 방법)
보충 지식: Vue.js $emit 트리거 이벤트로 구덩이 채우기
vue의 구성 요소 내에서 외부 이벤트를 촉발하는 것은 작용하지 않습니다
vue의 구성 요소 내에서 사용자 정의 이벤트 (외부 이벤트 발생) 가 작동하지 않음
오늘 vue의 사용자 정의 구성 요소 기능을 배워서 구성 요소 내부에서 이벤트를 터치합니다. 구성 요소를 사용하는 곳에서 v-on을 사용하여 이 이벤트를 연결합니다. 그러나 터치는 계속 효력이 발생하지 않습니다. 여러 번 검사한 코드에서 어떤 문제도 보지 못했습니다. 코드는 다음과 같습니다.
<div id="app">
<button v-on:click="IncrHandle"> </button>
<input v-model="total" placeholder=" " />
<child v-bind:count="total" v-on:onIncr="IncrHandle"></child>
</div>
Vue.component("child",{
props:['count'],
template:"<button v-on:click='incr'> {{count}}</button>",
data: function(){
return {
count: 0
}
},
methods:{
incr: function(){
this.$emit('onIncr')
this.count += 1
}
}
})
new Vue({
el:"#app",
data:{
total: 0
},
methods:{
IncrHandle:function(){
this.total += 1
total(" 1")
},
DncrHandle:function(){
this.total -= 1
}
}
})
무수한 검증을 거쳐 마침내 해결 방법을 찾았다.전달할 이벤트 이름이 단순 소문자임을 보증합니다.낙타봉 j 형식은 사용할 수 없습니다.
즉,
v-on:onIncr를 v-on:onincr로 변경하고this.emit(′onIncr′)가this로 변경되었습니다.emit('onIncr')이것으로 바꾸다.emit( ′ onIncr ′ )
이것으로 바꾸다.emit(‘onincr')
위의 Vue $emit () 가 상위 구성 요소 방법을 터치하지 못하는 이유와 해결은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 참고 부탁드리고 저희를 많이 사랑해 주세요.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.