It is commonly understood that when the child component is mounted before the parent component, trying to access props in the child component's mounted period will result in null.
However, I recently came across a scenario where props were successfully accessed in the child component's mounted period. This happened when the parent component's v-model was set as an array.
Here's an example of the parent component:
<example-input
v-model="arr[i]"
/>
...
<script>
...
data () {
return {
arr = ['a', 'b', 'c']
}
}
</script>
And here's an example of the child component:
export default {
props: value,
...
mounted () {
console.log(this.value) <<< and it works!
}
}
Surprisingly, running this setup resulted in each value in the array being printed out. This discovery has left me puzzled.
I've tried looking for similar cases online, but so far, I haven't found any. How is it possible for props to be accessed in the child component's mounted period? Any insights are greatly appreciated!