vue 클릭 이벤트에서 자식 이벤트를 부모에게 전달하는 방법.

Vue 클릭 이벤트에서 자식 이벤트를 부모에게 인계하는 방법.

(자식 템플릿의 버튼을 클릭할 때 상위 템플릿에 정의된 메서드를 실행하는 방법)

설정 절차

子：①クリックイベントを設定　@click=$emit('イベント名')
　　↓
親：②子のイベントを受け取る (子のタグ内で設定したイベント名)
　　↓
親：③methodsに処理を記述

・아이로부터 부모에게 이벤트를 계승한다.
・ $emit 아이로부터 부모에게의 데이터/이벤트 전달
· @click v-on:click의 약어

설명 예

· 준비하는 파일은 2 개
상위:parent.vue
아이: TmpBtn.vue

· 실현하고 싶은 것
부모에서 호출한 작은 템플릿의 버튼을 클릭할 때 부모 템플릿에서 설정한 메서드를 실행합니다.

(자식) TmpBtn.vue

<template>
    <v-btn
    elevation="2"
    rounded
    width="20%"
    //①クリックイベントを設定
    @click="$emit('child-click')"
    >
    ボタン
    </v-btn>
</template>

자식 템플릿의 버튼을 클릭하면 child-click이라는 이벤트를 부모에게 전달합니다.

(부모)parent.vue

<template>
  <v-app>
    <TmpBtn
　　<!--②子のイベントを受け取る-->
    @child-click="BtnClicked(hello)"
    />
  </v-app>
</template>

<script>
import TmpBtn from "./TmpBtn"

export default {
  components:{
    TmpBtn
  },
  data(){
    return{
      hello:"親テンプレートのメソッドを実行"
    }
  },
  methods:{
    //③methodsに処理を記述
    BtnClicked(a){
      console.log(a)
    }
  }
}
</script>

자식 템플릿의 버튼을 클릭하면 BtnClicked 메서드를 실행합니다.

▼실행예




자식 템플릿의 버튼 클릭으로, 부모 템플릿으로 설정한 이벤트의 발화에 성공.

$ emit하지 않으면 어떻게됩니까?

$emit 하지 않는 경우, 이벤트 설정은 2 종류 생각할 수 있다.

자식 템플릿에 click 이벤트 및 메서드 작성 → OK

부모 템플릿에 click 이벤트 및 메소드 작성 → NG

상기의 경우, 정상적으로 작동하는 것은 1만.
2의 부모 템플릿에서 호출 한 하위 템플릿 태그에 click 이벤트를 설정해도 작동하지 않습니다.

자식 템플릿에 작성하는 경우

<template>
    <v-btn
    elevation="2"
    rounded
    width="20%"
    @click="ChildClicked(child)"
    >
    ボタン
    </v-btn>
</template>

<script>
export default {
  methods:{
    ChildClicked(a){
      console.log(a)
    }
  },
  data(){
    return{
      child:"子テンプレートのボタンがクリックされました"
    }
  }
}
</script>

정상적으로 작동.

상위 템플릿에 작성하는 경우

(부모)parent.vue

<template>
  <v-app>
    <TmpBtn
    :bind="text"
    <!--子テンプレートを呼び出し、クリックイベントを設定-->
    @click="BtnClicked(hello)"
    />
  </v-app>
</template>

<script>
import TmpBtn from "./TmpBtn"

export default {
  components:{
    TmpBtn
  },
  data(){
    return{
     hello:"親テンプレートのメソッドを実行"
    }
  },
  methods:{
    BtnClicked(a){
      console.log(a)
    }
  }
}
</script>

반응 없음. .

부모 템플릿에 기술 된 메소드를 실행하는 경우, 다음의 2 패턴으로 검토 할 필요가있다.

①아이로부터 이벤트를 계승한다
② 상위 템플릿 내에 버튼을 만든 클릭 이벤트 설정

이벤트 정보 전달($event)

변수 $event 를 사용하는 것으로, 클릭한 화면상의 위치 정보등을 건네줄 수가 있다.

(자식) TmpBtn.vue

<template>
    <v-btn
    elevation="2"
    rounded
    width="20%"
    <!--clickイベントの引数で$eventを渡す-->
    @click="$emit('chiled-clicked', $event)"
    >
    ボタン
    </v-btn>
</template>

(부모)parent.vue

<template>
  <v-app>
    <TmpBtn
    <!--子テンプレのイベントを受け取り、メソッドを実行-->
    @chiled-clicked="BtnClicked(hello, $event)"
    />
    <br>
  </v-app>
</template>

<script>
import TmpBtn from "./TmpBtn"

export default {
  name: "Parent",
  components:{
    TmpBtn
  },
  data(){
    return{
      hello:"親テンプレートのメソッドを実行"
    }
  },
  methods:{
    //第２引数に$eventを渡す
    BtnClicked(a, b){
      console.log(a)
      console.log(b)
    }
  }
}

▼실행 결과


$event의 내용

MouseEvent {isTrusted: true, screenX: 77, screenY: 151, clientX: 77, clientY: 17, …}
isTrusted: true
screenX: 77
screenY: 151
clientX: 77
clientY: 17
ctrlKey: false
shiftKey: false
altKey: false
metaKey: false
button: 0
buttons: 0
relatedTarget: null
pageX: 77
pageY: 17
x: 77
y: 17
offsetX: 61
offsetY: 10
movementX: 0
movementY: 0
fromElement: null
toElement: span.v-btn__content
layerX: 61
layerY: 9
view: Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
detail: 1
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
which: 1
type: "click"
target: span.v-btn__content
currentTarget: null
eventPhase: 0
bubbles: true
cancelable: true
defaultPrevented: false
composed: true
timeStamp: 132300.8249999839
srcElement: span.v-btn__content
returnValue: true
cancelBubble: false
path: (8) [span.v-btn__content, button.v-btn.v-btn--rounded.theme--light.elevation-2.v-size--default, div.v-application--wrap, div#app.v-application.v-application--is-ltr.theme--light, body, html, document, Window]
__proto__: MouseEvent

$event 내의 특정 데이터를 원한다면 속성을 지정한다.

  methods:{
    BtnClicked(a, b){
      console.log(b.type)
    }
  }

//出力
//click