Vue - ref 역할 알아보기

https://vuejs.org/v2/api/#ref

API — Vue.js

 

 

자식의 component 요소를 부모의 page가 참조하기 위해서 사용한다. 

이를 사용하면 작업할때마다 새로고침 해서 결과물을 확인할 필요가 없이 바로 적용되는것을 알 수 있다.

 

<div class="pc_rightContants">
            <div v-if="pcRightItem == 1">
                <StudioLocker ref="locker" @delCheck="delCheck(arguments[0])" :info="userConfig" :myPointInfo="myPointInfo" @infoChange="info_Change(arguments[0])" @apply_item="apply_Img(arguments[0])" @goStudio="goStudio"></StudioLocker>
            </div>
            <div v-if="pcRightItem == 2">
                <StudioFontStyle :textInfo="textInfo" :info="userConfig" @infoChange="info_Change(arguments[0])" :type="selectObj" @text_add="text_add(arguments[0])"></StudioFontStyle>
            </div>
            <div v-if="pcRightItem == 3">
                <StudioBackStyle :info="userConfig" @infoChange="info_Change(arguments[0])" @apply_bg="apply_bg(arguments[0])"></StudioBackStyle>
            </div>
            <div v-if="pcRightItem == 4">
                <StudioWorkList :info="userConfig" ref="StudioWorkList" @getWorkCount="getWorkCount()" @newContent="newContent()" @infoChange="info_Change(arguments[0])" @load_data="load_data(arguments[0])"></StudioWorkList>
            </div>
            <div v-if="pcRightItem == 5">
                <StudioHelpList></StudioHelpList>
            </div>
        </div>

downOkBtn() {
  this.downloadStatus = false;
  this.saveStatus = 'complete';
  this.$refs.StudioWorkList.load_data();
},