કમ્પોનન્ટ ઇવેન્ટ્સ (Component Events) ​

આ પેજ ધારે છે કે તમે પહેલાથી જ કમ્પોનન્ટ્સના મૂળભૂત પાસાઓ વાંચી લીધું છે. જો તમે કમ્પોનન્ટ્સ માટે નવા હોવ તો પહેલા તે વાંચો.

ઇવેન્ટ્સ મોકલવી અને સાંભળવી (Emitting and Listening to Events) ​

કમ્પોનન્ટ બિલ્ટ-ઇન $emit મેથડનો ઉપયોગ કરીને ટેમ્પલેટ એક્સપ્રેશન્સમાં (દા.ત. v-on હેન્ડલરમાં) કસ્ટમ ઇવેન્ટ્સ સીધી રીતે મોકલી (emit) શકે છે:

<!-- MyComponent -->
<button @click="$emit('someEvent')">મને ક્લિક કરો</button>

export default {
  methods: {
    submit() {
      this.$emit('someEvent')
    }
  }
}

પેરેન્ટ પછી v-on નો ઉપયોગ કરીને તેને સાંભળી શકે છે:

<MyComponent @some-event="callback" />

કમ્પોનન્ટ ઇવેન્ટ લિસનર્સ પર .once મોડિફાયર પણ સપોર્ટેડ છે:

<MyComponent @some-event.once="callback" />

કમ્પોનન્ટ્સ અને પ્રોપ્સની જેમ, ઇવેન્ટ નામો આપમેળે કેસ ટ્રાન્સફોર્મેશન પ્રદાન કરે છે. નોંધ કરો કે અમે camelCase ઇવેન્ટ મોકલી છે, પરંતુ પેરેન્ટમાં kebab-cased લિસનરનો ઉપયોગ કરીને તે સાંભળી શકીએ છીએ. પ્રોપ્સ કેસિંગ ની જેમ, અમે ટેમ્પલેટ્સમાં kebab-cased ઇવેન્ટ લિસનર્સનો ઉપયોગ કરવાની ભલામણ કરીએ છીએ.

ઇવેન્ટ આર્ગ્યુમેન્ટ્સ (Event Arguments) ​

ઇવેન્ટ સાથે ચોક્કસ વેલ્યુ મોકલવી ક્યારેક ઉપયોગી છે. ઉદાહરણ તરીકે, આપણે ઈચ્છીએ છીએ કે લખાણને કેટલું મોટું કરવું તેનો હવાલો <BlogPost> કમ્પોનન્ટ પાસે હોય. તે કિસ્સાઓમાં, અમે આ વેલ્યુ પૂરી પાડવા માટે $emit માં વધારાની આર્ગ્યુમેન્ટ્સ પાસ કરી શકીએ છીએ:

<button @click="$emit('increaseBy', 1)">
  ૧ વધારો
</button>

પછી, જ્યારે આપણે પેરેન્ટમાં ઇવેન્ટ સાંભળીએ છીએ, ત્યારે અમે લિસનર તરીકે ઇનલાઇન એરો ફંક્શનનો ઉપયોગ કરી શકીએ છીએ, જે અમને ઇવેન્ટ આર્ગ્યુમેન્ટને એક્સેસ કરવાની મંજૂરી આપે છે:

<MyButton @increase-by="(n) => count += n" />

અથવા, જો ઇવેન્ટ હેન્ડલર મેથડ હોય:

<MyButton @increase-by="increaseCount" />

પછી વેલ્યુ તે મેથડના પ્રથમ પેરામીટર તરીકે પસાર થશે:

methods: {
  increaseCount(n) {
    this.count += n
  }
}

function increaseCount(n) {
  count.value += n
}

એમિટ કરેલી ઇવેન્ટ્સ જાહેર કરવી ​

કમ્પોનન્ટ defineEmits() મેક્રોemits ઓપ્શન નો ઉપયોગ કરીને તે જે ઇવેન્ટ્સ મોકલશે તે સ્પષ્ટપણે જાહેર કરી શકે છે:

<script setup>
defineEmits(['inFocus', 'submit'])
</script>

<script setup>
const emit = defineEmits(['inFocus', 'submit'])

function buttonClick() {
  emit('submit')
}
</script>

export default {
  emits: ['inFocus', 'submit'],
  setup(props, ctx) {
    ctx.emit('submit')
  }
}

export default {
  emits: ['inFocus', 'submit'],
  setup(props, { emit }) {
    emit('submit')
  }
}

export default {
  emits: ['inFocus', 'submit']
}

emits ઓપ્શન અને defineEmits() મેક્રો ઓબ્જેક્ટ સિન્ટેક્સને પણ સપોર્ટ કરે છે. જો TypeScript નો ઉપયોગ કરતા હોવ તો તમે આર્ગ્યુમેન્ટ્સ ટાઇપ કરી શકો છો, જે અમને એમિટ કરેલી ઇવેન્ટ્સના પેલોડ (payload) નું રનટાઇમ વેલિડેશન કરવાની મંજૂરી આપે છે:

<script setup lang="ts">
const emit = defineEmits({
  submit(payload: { email: string, password: string }) {
    // વેલિડેશન પાસ / ફેલ સૂચવવા માટે
    // `true` અથવા `false` રિટર્ન કરો
  }
})
</script>

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
</script>

export default {
  emits: {
    submit(payload: { email: string, password: string }) {
      // વેલિડેશન પાસ / ફેલ સૂચવવા માટે
      // `true` અથવા `false` રિટર્ન કરો
    }
  }
}

ભલે વૈકલ્પિક હોય, પણ ઘટકે કેવી રીતે કામ કરવું જોઈએ તેને વધુ સારી રીતે દસ્તાવેજ (document) કરવા માટે તમામ એમિટ કરેલી ઇવેન્ટ્સ વ્યાખ્યાયિત કરવાની ભલામણ કરવામાં આવે છે. તે Vue ને Fallthrough Attributes માંથી જાણીતા લિસનર્સને બાકાત રાખવાની પણ મંજૂરી આપે છે, જે થર્ડ પાર્ટી કોડ દ્વારા મેન્યુઅલી મોકલેલી DOM ઇવેન્ટ્સના કારણે થતી અસરોને ટાળે છે.

ઇવેન્ટ્સ વેલિડેશન (Events Validation) ​

પ્રોપ ટાઇપ વેલિડેશનની જેમ જ, એમિટ કરેલી ઇવેન્ટ ને વેલિડેટ કરી શકાય છે જો તેને એરે સિન્ટેક્સ ને બદલે ઓબ્જેક્ટ સિન્ટેક્સ સાથે વ્યાખ્યાયિત કરવામાં આવી હોય.

વેલિડેશન ઉમેરવા માટે, ઇવેન્ટને એક ફંક્શન અસાઇન કરવામાં આવે છે જે this.$emitemit કોલમાં પાસ કરેલી આર્ગ્યુમેન્ટ્સ મેળવે છે અને ઇવેન્ટ માન્ય છે કે નહીં તે સૂચવવા માટે બુલિયન પરત કરે છે.

<script setup>
const emit = defineEmits({
  // કોઈ વેલિડેશન નથી
  click: null,

  // submit ઇવેન્ટ વેલિડેટ કરો
  submit: ({ email, password }) => {
    if (email && password) {
      return true
    } else {
      console.warn('અમાન્ય સબમિટ ઇવેન્ટ પેલોડ!')
      return false
    }
  }
})

function submitForm(email, password) {
  emit('submit', { email, password })
}
</script>

export default {
  emits: {
    // કોઈ વેલિડેશન નથી
    click: null,

    // submit ઇવેન્ટ વેલિડેટ કરો
    submit: ({ email, password }) => {
      if (email && password) {
        return true
      } else {
        console.warn('અમાન્ય સબમિટ ઇવેન્ટ પેલોડ!')
        return false
      }
    }
  },
  methods: {
    submitForm(email, password) {
      this.$emit('submit', { email, password })
    }
  }
}