Vue හි ඉවෙන්ට් එමිට් කිරීම

ඔබ දැනටමත් දන්නා පරිදි, දත්ත ගමනා ගමනය කරන්නේ ප්‍රධාන කොම්පොනන්ට් වලින් දරු කොම්පොනන්ට් වෙතට ය. දැන් අපි බලමු දරු කොම්පොනන්ට් ප්‍රධාන කොම්පොනන්ට් සමඟ සන්නිවේදනය කරන්නේ කෙසේද කියා. මෙය සිදු කරනු ලබන්නේ ඉවෙන්ට් එමිට් කිරීම භාවිතා කරමිනි. අපි ප්‍රායෝගිකව බලමු.

ප්‍රධාන කොම්පොනන්ට් එකේ යම් ක්‍රමයක් තිබේවා:

App.vuemethods: {
  func() {
    alert('xxx');
  }
}

මෙම ක්‍රමය පරාමිතියක් ලෙස දරු කොම්පොනන්ට් එකට සම්ප්‍රේෂණය කරමු:

App.vue<template>
  <User @show="func" />
</template>

එමිට් කරන ඉවෙන්ට් එක emits සැකසුමේ දක්වමු:

components/User.vueexport default {
  emits: ['show'],
  data() {
    return {
      
    }
  }
}

දැන් අපි දරු කොම්පොනන්ට් එකේ බොත්තමක් සාදමු, එය එය මත ක්ලික් කිරීම සකසනු ඇත:

components/User.vue<template>
  <button @click="handle">btn</button>
</template>

ක්ලික් හැසිරවීම්කාරකය සාදමු:

components/User.vuemethods: {
  handle() {
    
  }
}

දැන් අපි හැසිරවීම්කාරකය තුළ ප්‍රධාන ශ්‍රිතය ක්‍රියාත්මක වන පරිදි කරමු. මේ සඳහා, $emit ශ්‍රිතය භාවිතා කරමින් ඉවෙන්ට් එක එමිට් කරමු, එහි පරාමිතිය ලෙස එමිට් කරන ඉවෙන්ට් එකේ නම සඳහන් කරමු:

components/User.vuemethods: {
  handle() {
    this.$emit('show');
  }
}