vue 부모에서 자식 컴포넌트 호출

부모 컴포넌트

<Test ref="Test"></Test>

<script>
  import Exhaustion from "@/components/경로/Test.vue";
  
  export default {

    data() {
      return {
          params : {
              meassage : "test",
          }
      };
    },
    
    show: function() {
      this.$refs.Test.show(this.params);
    },
	
    components: {
      Test,
    },
    
    mounted: async function() {
      this.$nextTick(function() {
        this.show();
      });
    },  
  }
</script>

 

자식 컴포넌트

<script>
  export default {
    data() {
      return {
      
      };
    },
    methods: {
      test: function(params) {
        console.log(params);
      },
    },
  };
</script>

 

작업중 아래와 같은 오류 발생시

 

vue Error in created hook (Promise/async)

vue Error in mounted hook (Promise/async)

 

mounted: function () {
  this.$nextTick(function () {
    // 모든 화면이 렌더링된 후 실행합니다.
  })
}

this.$nextTick 사용시 해결 된다