JAVASCRIPT

focus on child components on single page applications - 1

<template>
  <div>
    <button type="button" @click="focusChildInput">Focus to Input</button>
    <child />
  </div>
</template>

<script>
import child from './child.vue';

export default {
  name: 'app',
  components: { child },
  methods: {
    focusChildInput() {
      this.$root.$emit('focusChildInput');
    },
  },
};
</script>

focus on child components on single page applications - 2

<template>
  <div>
    <input type="text" ref="childInput" />
  </div>
</template>

<script>
export default {
  name: 'child',
  mounted() {
    this.$root.$on('focusChildInput', () => this.$refs.childInput.focus());
  },
};
</script>