Vue $emit()가 상위 구성 요소 메서드를 트리거할 수 없는 이유 및 해결

$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 () 가 상위 구성 요소 방법을 터치하지 못하는 이유와 해결은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 참고 부탁드리고 저희를 많이 사랑해 주세요.

좋은 웹페이지 즐겨찾기