Despite the existence of props and events, sometimes you might still need to directly access a child component in JavaScript. To achieve this you can assign a reference ID to the child component or HTML element using the ref attribute. For example:
<input ref="input" />
This may be useful when you want to, for example, programmatically focus this input on component mount:
const app = Vue.createApp({}) app.component('base-input', { template: ` <input ref="input" /> `, methods: { focusInput() { this.$refs.input.focus() } }, mounted() { this.focusInput() } })
Also, you can add another ref to the component itself and use it to trigger focusInput event from the parent component:
<base-input ref="usernameInput"></base-input>
this.$refs.usernameInput.focusInput()
