When working with Vue.js 3 using the Options API, I encountered a challenge in accessing a child component's method. Although there is a solution provided for Vue.js 2 and Vue.js 3 with Composition API on How to access to a child method from the parent in vue.js, I attempted it within the parent component:
<dropdown-list @update="updateChildComponents"></dropdown-list>
<child-component-1 ref="childComponent1Ref" :url="url"></child-component-1>
<child-component-2 ref="childComponent2Ref" :url="url"></child-component-2>
and
methods: {
updateChildComponents() {
this.$refs.childComponent1Ref.childComponentMethod();
this.$refs.childComponent2Ref.childComponentMethod();
}
}
While this approach successfully accesses the method, I am uncertain if it is the most appropriate way to do so.
Additionally, I noticed a delay with updating a prop in the child component from the parent, which is used in the child component's method and only takes effect after the second event. I suspect these issues might be connected.
Within the child component:
props: ['url'],
methods: {
childComponentMethod() {
console.log(this.url); // retrieves the value from the previous event
}
}
Your insights and guidance would be greatly appreciated.