Vue හි ඉවෙන්ට් එමිට් කිරීම
ඔබ දැනටමත් දන්නා පරිදි, දත්ත ගමනා ගමනය කරන්නේ ප්රධාන කොම්පොනන්ට් වලින් දරු කොම්පොනන්ට් වෙතට ය. දැන් අපි බලමු දරු කොම්පොනන්ට් ප්රධාන කොම්පොනන්ට් සමඟ සන්නිවේදනය කරන්නේ කෙසේද කියා. මෙය සිදු කරනු ලබන්නේ ඉවෙන්ට් එමිට් කිරීම භාවිතා කරමිනි. අපි ප්රායෝගිකව බලමු.
ප්රධාන කොම්පොනන්ට් එකේ යම් ක්රමයක් තිබේවා:
methods: {
func() {
alert('xxx');
}
}
මෙම ක්රමය පරාමිතියක් ලෙස දරු කොම්පොනන්ට් එකට සම්ප්රේෂණය කරමු:
<template>
<User @show="func" />
</template>
එමිට් කරන ඉවෙන්ට් එක
emits සැකසුමේ දක්වමු:
export default {
emits: ['show'],
data() {
return {
}
}
}
දැන් අපි දරු කොම්පොනන්ට් එකේ බොත්තමක් සාදමු, එය එය මත ක්ලික් කිරීම සකසනු ඇත:
<template>
<button @click="handle">btn</button>
</template>
ක්ලික් හැසිරවීම්කාරකය සාදමු:
methods: {
handle() {
}
}
දැන් අපි හැසිරවීම්කාරකය තුළ
ප්රධාන
ශ්රිතය ක්රියාත්මක වන පරිදි කරමු.
මේ සඳහා, $emit ශ්රිතය භාවිතා කරමින්
ඉවෙන්ට් එක එමිට් කරමු,
එහි පරාමිතිය ලෙස එමිට් කරන ඉවෙන්ට් එකේ
නම සඳහන් කරමු:
methods: {
handle() {
this.$emit('show');
}
}
දරු කොම්පොනන්ට් එකට ශ්රිත දෙකක් සම්ප්රේෂණය කරන්න. දරු කොම්පොනන්ට් එකේ බොත්තම් දෙකක් සාදන්න, ඒ එක් එක් බොත්තම සම්ප්රේෂණය කළ ශ්රිත වලින් එකක් ක්රියාත්මක කරනු ඇත.
