0👍
You are misunderstanding how components should work in Vue. In short you can understand them by:
parent send props down and child send events up
What you are looking for is that whenever your arrayLength
updates, you send an event to the parent. Then, it is the responsibility of the parent to handle that event. In this case, the parent would receive the event and store the length of the array.
Parent.vue
<template>
<div>
<child @arrayLenght:update="onArrayLenghtUpdate"/>
</div>
</template>
<script>
export default {
data: () => {
arrayLength: 0,
},
methods: {
onArrayLenghtUpdate(length) {
this.arrayLength = length;
}
}
}
</script>
Child.vue
<template> ... </template>
<script>
export default {
data: () => ({
arrayLength: 0,
}),
watch: {
arrayLenghth: function (newLenght) {
this.$emit('arrayLenght:update', newLenght);
}
}
}
</script>
This is the standard way and extremely useful if your Parent
and Child
aren’t highly coupled together. If they are dependent on each other (you won’t use Child.vue
anywhere else in the app. Just as direct child of Parent.vue
) then you can use the inject/provide
approach. This approach is beyond the scope of this answer, feel free to read an article on it
- [Vuejs]-How to get load event in Pictures same as images?
- [Vuejs]-How to use 2 v-for and pass props data to child components in Vue.js