[Vue.js] Native에서 Web의 함수를 호출할 때

Vue 기반 웹뷰에서 네이티브간 인터페이스 방법을 알아보자.

보통 스크립트에 callback 함수를 정의하고 네이티브에서 해당 함수명을 호출하는 방식으로 작업을 하는데, Vue에서는 컴포넌트에 정의된 메소드를 네이티브에서 호출할 수 없다는 문제가 있다.

네이티브에서 Vue.js의 함수들을 호출하기 위해서는 글로벌로 선언을 해주어야한다.

네이티브에서 호출할 함수명으로 스크립트에서 함수를 생성하고 window 영역에 등록해주면 네이티브에서 함수 호출이 가능하다.

<template>
	<div>

	</div>
</template>

<script>
export default {
	data(){
		return {

		}
	},
  mounted(){
    window.callWebFunc() = this.callWebFunc();
  },
  methods:{
    callWebFunc(){
      console.log("success");
    }
  }
}