v-on="의 기능VueJS에서 구문 의미?

v-on="의 기능VueJS에서 구문 의미?

활성화기라는 범위 슬롯이 있는 v-dialog 구성 요소에 대한 Vuetify 예제를 다음과 같이 정의하게 되었다.

  <template v-slot:activator="{ on }">
    <v-btn
      color="red lighten-2"
      dark
      v-on="on"
    >
      Click Me
    </v-btn>
  </template>

VueJS 문서로부터 슬롯의 범위 설정의 목적과 슬롯 소품을 파괴하는 개념은 이해하지만, 그 의미가 무엇인지 모르겠다.v-on="on"이 예에서는특히 이벤트가 지정되지 않은 경우 무엇을 의미v-on지시적인가?

의 VueJS 문서에는 명시적으로 지정된 이벤트 이름과 함께 사용량만 표시된다(예: v-on:click="...") 그러나 그것을 단지 로 사용하는 것에 대한 설명은 없다.v-on="...".

누가 이 구문과 그것의 용법을 Vuetify 예에서 설명할 수 있는가?

TLDR:

기본 용법

<!-- object syntax (2.4.0+) --> 
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>]

그래서 기본적으로@click="..."대등하다v-on:click="..."대등하다v-on="{click:...}"

---

TLDR:

구현 확인:

genActivator () {
      const node = getSlot(this, 'activator', Object.assign(this.getValueProxy(), {
        on: this.genActivatorListeners(),
        attrs: this.genActivatorAttributes(),
      })) || []

      this.activatorNode = node

      return node
    }

---

일부 통찰력:

---

여러 줄의 과제를 작성하는 대신 여러 수신기를 한 번에 추상화하여 전달하고자 할 때 유용하다.

---

구성 요소를 고려하십시오.

export default {

  data() {
    return {
      on: {
        click: console.log,
        contextmenu: console.log
      },
      value: "any key value pair"
    }
  }
}

<template>
  <div>
    <slot name="activator" :on="on" :otherSlotPropName="value" >
      <defaultComponent v-on="on" />
    </slot>
  </div>
</template>

위의 구성 요소에서 슬롯 속성에 액세스하여 사용자 지정 구성 요소에 전달하십시오.

<ExampleComponent>
  <template v-slot:activator="{ on, otherSlotPropName }">
    <v-btn
      color="red lighten-2"
      dark
      v-on="on"
    >
      Click Me
    </v-btn>
  </template>
 <ExampleComponent />

---

가끔은 평범한 자바스크립트로 보는 것이 더 쉽다.

위의 구성 요소와 템플릿 대신 렌더 함수 비교:

export default {

  data() {
    return {
      on: {
        click: console.log,
        contextmenu: console.log
      },
      value: "any key value pair"
    }
  },
  render(h){

    return h('div', [
      this.$scopedSlots.activator &&
      this.$scopedSlots.activator({
        on: this.on,
        otherSlotPropName: this.value
      })
      || h('defaultComponent', {
        listeners: this.on
      }
    ]
  }
}

---

원본에서:

공백인 경우v-on="eventsObject"그 방법은 다음과 같은 이벤트를 할당하는 결과로 호출될 것이다.data.on.

이것은 범위 내에서 일어난다.

파이널리 더listeners로 통하다.VNodeComponentOptions에 의해 업데이트됨.

---

Vue가 확장되는 경우 - Vuetify 구현 검사:

vue 인스턴스에 가입하고 확장할 수 있다는 점을 고려할 때, 어떤 구성요소도 더 많은 원자 버전으로 축소될 수 있다는 것을 스스로 납득시킬 수 있다.

이것이 부시가 예에서 활용하는 것이다. v-dialog구성 요소를 생성하여 구성 요소

지금으로서는 의 내용을 추적할 수 있다.on에 의해 장착됨:

const simplyfiedActivable = {

  mounted(){
    this.activatorElement = this.getActivator()
  },
  watch{
    activatorElement(){
      // if is el?
      this.addActivatorEvents()
    }
  },
  methods: {
    addActivatorEvents(){
      this.listeners = this.genActivatorListeners()
    },
    genActivatorListeners(){
      return {
        click: ...,
        mouseenter: ...,
        mouseleave: ...,
      }
    },

genActivator () {
      const node = getSlot(this, 'activator', Object.assign(this.getValueProxy(), {
        on: this.genActivatorListeners(),
        attrs: this.genActivatorAttributes(),
      })) || []

      this.activatorNode = node

      return node
    },

  }
}

위의 코드 조각으로, 남은 것은 이것을 실제 구성요소에 구현하는 것이다.

// vuetify usage/implemention of mixins 
const baseMixins = mixins(
  Activatable,
  ...other
)

const sympliefiedDialog = baseMixins.extend({
  ...options,
  render(h){
    
    const children = []
    children.push(this.genActivator())
    return h(root, ...options, children)
  }
})

---

참조URL: https://stackoverflow.com/questions/57524110/what-does-v-on-syntax-mean-in-vuejs