VueJ가 vue 구성 요소의 외부 Import 메서드에 액세스합니다.

VueJ가 vue 구성 요소의 외부 Import 메서드에 액세스합니다.

외부 Java 스크립트 파일 something.js가 있습니다.

function myFun(){
  document.getElementById("demo").innerHTML="Hello World!";
  }

export default myFun;

그리고 이것은 저의 vue 컴포넌트 대시보드입니다.표시하다

<template>
    <div>
        <button type="button" name="button" @click="">Call External JS</button>
        <div id="demo"></div>
    </div>
</template>

<script>
import something from "./something.js"
export default {

created(){
}
}
</script>

두 가지 질문이 있습니다.

1. 먼저 작성한 라이프 사이클훅 내에서 이 메서드를 호출하여 자동으로 실행하는 방법을 알려주세요.
2. 둘째, "외부 JS 호출" 버튼을 눌러 이 메서드를 호출하는 방법

순수 JS 외부 파일의 도움 없이도 vueJ가 쉽게 div의 내용을 변경할 수 있기 때문입니다.하지만 vue 구성 요소 내에서 외부 JS 파일을 사용하는 방법에 대한 개념을 명확히 하기 위해 이 질문을 합니다.

감사합니다.

보다 나은 솔루션은 mixin을 사용하는 것입니다.

import something from './something.js'
export default {
  mixins: [something]
}

이제 내보낸 모든 메서드/계산 방법을 사용할 수 있습니다.something.js(직접)this.

이 예에서는, 다음과 같이 되어 있습니다.myFun()에서 내보낸something.js에서 호출할 수 있습니다.Dashboard.vue다음과 같이 합니다.

<template>
    <div>
        <button type="button" name="button" @click="myFun">Call External JS</button>
        <div id="demo"></div>
    </div>
</template>

<script>
    import something from "./something.js"
    export default {
        mixins: [something],
        mounted(){
            this.myFun()
        }
    }
</script>

구문이 맞았으면 좋겠는데, 그게 보통 믹스인의 개념이에요.

1. Import된 콜은something원하는 라이프 사이클 방식으로 작동합니다.여기에서는, 다음의 것을 사용하는 것을 추천합니다.mounted방법.모든 구성 요소의 HTML이 렌더링되면 트리거됩니다.

2. 를 추가할 수 있습니다.somethingvue 컴포넌트의 메서드에 따라 함수를 호출한 다음 템플릿에서 함수를 직접 호출합니다.

<template>
    <div>
        <button type="button" name="button" @click="something">
            Call External JS
        </button>
        <div id="demo"></div>
    </div>
</template>

<script>
import something from "./something.js"

export default {
    mounted() {
        something()
    },
    methods: {
        something,
    },
}
</script>

또 다른 접근방식은 데이터 블록에 메서드를 추가하는 것입니다.

import something from "./something.js" // assuming something is a function

data() {
  return {
    // some data...
    something,
  }
}

그런 다음 템플릿에서 다음과 같이 사용합니다.

<template>
    <div class="btn btn-primary" @click="something">Do something</div>
</template>

예를 들어 외부 javascript 파일 something.js 입니다.

function myFun(){
   document.getElementById("demo").innerHTML="Hello World!";
}

export default myFun;

메서드에서는 오브젝트처럼 해석할 수 있습니다.대시보드의 {}.표시하다

<template>
    <div>
        <button type="button" name="button" @click="something">Call External JS</button>
        <div id="demo"></div>
    </div>
</template>

<script>
import something from "./something.js"
export default {

   methods: {
      something,
   }
}
</script>

수동적이거나 컴포넌트(API가 아닌)와 결합되어 있는 메서드는 다음과 같이 기술해야 합니다.methods.저는 이 관행을 따릅니다.컨셉을 명확히 하기 위한 시나리오가 있습니다.

JS 파일(함수가 포함된 파일) 파일 이름 - apis.js

export function GetApiCall(apiName, data, header) {
 return new Promise((resolve, reject) => {
    //do something here
  });
 }

이 기능은 여기서 사용한 적이 있습니다.created후크. 중요한 건 사용자 정의 방법 중 하나를 사용할 수 있다는 거예요.

vue file(js file에서 해당 함수를 사용할 것) - filename - infoform.표시하다

 import { GetApiCall } from '../utils/apisget';
  export default{
    created(){
        // Invoked API to get Data of organization
        GetApiCall(URL,{},{
                "Content-Type": "application/json",
                "Authorization": 'Bearer ' + token
            })
            .then(responseJson => {
            })
            .catch(err=>{
                this.$toasted.show(err);
                // console.log('error==',err);
            });
    },
  methods: {
     onClickMethod () {
       GetApiCall(URL,{},{});
     }
  }
}

내가 만든 것은"/helpers/modalHelpermodalHelper.js".

export default function modalHelper() {
   function showModalWithoutBackdrop(modalID) {
      $('#' + modalID).modal({
         backdrop: 'static',
         keyboard: false
      });
   }

   function showModal(modalID) {
      $('#' + modalID).modal("show");
   }

   function hideModal(modalID) {
      $('#' + modalID).modal("hide");
   }

   return {
      showModalWithoutBackdrop,
      showModal,
      hideModal,
   }
}

사용방법: vue 컴포넌트 스크립트 파트:

<script>
    
    import modalHelper from "@/helpers/modalHelpermodalHelper.js"
    
    const {showModal} = modalHelper();
    
    export default {
      methods: {
          showModal,
      }
    }
<script>

이제 템플릿에서 이 방법을 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/49144933/vuejs-accessing-externaly-imported-method-in-vue-component