[SOLVED] How to access to a nested components in Vue?


This Content is from Stack Overflow. Question asked by lai9fox

I get a Vue component like that:

    <div>other things...</div>
    <FilterPopUp ref="filterPopUp">
      <FilterInput ref="filterInput"/>
import FilterPopUp from './filter-popup.vue';
import FilterInput from './filter-input.vue';
export deafult {
  name: 'Filter',
  components: {
  method: {
    resetOptionStore() {
      // this.$refs.filterInput.resetFilter();

What I want to do is get access to FilterInput Component in resetOptionStore method, but I failed.

The actual value of this.$refs.filterInput is undefined, how can I work out this problem?

enter image description here


Ideally it should work, I just created a below working code snippet just for a demo. You can check and try to find the root cause by taking the reference.

Vue.component('child', {
  props: ['childmsg'],
  template: '<div>{{ childmsg }}<slot></slot></div>',
  methods: {
    call() {
        console.log('Child call');

Vue.component('innerchild', {
  props: ['innerchildmsg'],
  template: '<li>{{ innerchildmsg }}</li>',
  methods: {
    call() {
        console.log('inner Child call');

var app = new Vue({
  el: '#app',
  mounted() {
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <child ref="childComponent" childmsg="This is a child message">
    <innerchild ref="innerChildComponent" innerchildmsg="This is a inner child message"></innerchild>

This Question was asked in StackOverflow by lai9fox and Answered by Rohìt Jíndal It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?