🙆‍♂️ import 🙇‍♂️

[VueJS] 부모, 자식 간의 메소드 사용/접근하기 (ft. $parent, $refs, Inline Templates)[나만의 기록들]

부모요소에서 자식요소 method 호출

Vue.js에서 부모요소에서 자식 요소의 method를 호출하려면,

1. 먼저 부모 요소에서 자식 요소 Element에 ref라는 주소 value를 선언해준다.

// 부모 요소
<template>
    // 자식요소 element에 ref 선언
    <api-request
      ref="apiRequest"
      @licenseInfo="getLicenseInfo"
    />
</template>

2. 그 후 this.$refs.자식요소ref명.자식요소method(); 형식으로 호출하면,
   자식요소의 method를 호출할 수 있다.

// 부모 요소
<template>
    // 자식요소 element에 ref 선언
    <api-request
      ref="apiRequest"
      @licenseInfo="getLicenseInfo"
    />
</template>

<script>
import apiRequest from './component/licenseApiRequest.vue'

export default {
  name: '',
  components: {
    apiRequest
  },
  data() {
    return {
      tableData: [],
      page: []
  },
  methods: {
    getLicenseInfo(data) {
      this.tableData = data.items
      this.page = data.page
    },
    searchBtnClick() {
    	// 해당 형식으로 자식요소 method 호출
        this.$refs.apiRequest.fetchData('')
    },
    parentMethod() {
        alert('hi child')
    }
  }
}
</script>

자식요소에서 부모요소 method 호출

반대로, 자식요소에서 부모요소의 method를 호출하려면 아래와 같이,

this.$parent.부모요소method(); 형식으로 호출하면 된다.

// 자식요소
<script>
export default {
  data() {
    return {
    }
  },
  created() {
    // 자식요소에서 부모 요소 method 호출
    this.$parent.parentMethod()
    this.fetchData('')
  },
  methods: {
    fetchData(query) {
      axios
        .get('http://localhost/licenses'+query)
        .then(res => {
          console.log(res.data)
          this.$emit('licenseInfo', res.data)
        })
        .catch(err => {
          alert('fail')
          console.log(err)
        })
    }
  }
}
</script>