vue ref code example

Example 1: vuejs ref

<template>
	<input ref="input">
</template>

<script>
  export default {
    methods: {
	  // used to put the focus on this field from the parent
      focus() {
        this.$refs.input.focus();
      }
    }
  };
</script>

Example 2: how to get 3rd level form data by $refs in vue

Vue.component('mycomponent', {
    template: "#mycomponent",
});

new Vue({
  el: '#app',
  mounted() {
    console.log(
      'Second level <input>\'s value:',
      this.$refs.myFirstLevelRefName.$refs.mySecondLevelRefName.value
    )
  }
})

Example 3: vuejs events 2 levels out

Root //but you listen to the event up here 1 level above
 Component 1 //you should listen to the event here
  Component 2 //your try to emit it from here