Created
February 2, 2022 15:52
-
-
Save cn-2k/65a4872f77d4f024ffc4659595b58ede to your computer and use it in GitHub Desktop.
Watch + Emit - Vue 3 (C.A)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// first of all: props are for parent -> child and we can use emit for child -> parent | |
// parent-component.vue | |
<card-stats | |
@goalReachedPercentage="getReachedGoalValue" | |
/> | |
const getReachedGoalValue = (percent) => { | |
datas.indicatorGoalPercentage.push(percent) | |
console.log(datas.indicatorGoalPercentage); | |
} | |
// child-component.vue | |
emits: ['goalReachedPercentage'], | |
// watching something change and firing an emit: | |
watch( | |
() => value, | |
(currentValue, oldValue) => { | |
emit( | |
'goalReachedPercentage', | |
goalPercentage.value >= 100 ? 100 : goalPercentage.value | |
) | |
}, | |
// optional | |
{ immediate: true } | |
) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment