어떻게 vuejs에 재사용할 수 있는 작은 기능을 격리시켜야겠어요

어떻게 vuejs에 재사용할 수 있는 작은 기능을 격리시켜야겠어요

나는 것이 증표를 생성하는 문자열을 생성하라고 있도록 하는 기능이 있다.나는 내 생각에 이 기능이 있다.methods:{}그리고 나는 내 div에서 어떤 문제 없이 사용한다.

하지만 나는 그것에서 이 기능을 맞춰야 한다고 자신만의 별도의 파일 그래서 나는 나중에 사용하기 위해 수입할 수 있을지, 그래서 나는 a를functions.js안쪽 파일src다음과 같습니다.

// /src/functions.js
export default {
    // generate tokes
  tokenGenerator () { ... }

}

그리고에서 내src/components/foo.vue나는 이 파일(를 가져올 때 어떤 문제들)을 수입하고 있다.

<template>
 <div> {{ tokenGenerator }} </div>
</template>

<script>
import tokenGenerator from '../../functions'
export default {
   data() {
      return ;
   }
}
</script>

이지만, 그렇지 않아 협력해야 한다.수입이 문제가 아니지만, else..그 콘솔은 착오가 그것은 기능 tokenGenerator을 찾을 수가 없는 것을 보여 준다.

먼저, 여러분은 기능이 하나를 수입한다고 하지만, 같아요.tokenGenerator코드에서는 전체 개체에서 수출된 참조입니다.functions파일.

둘째로, 평범한javascript 기능 뷰 보간법을 사용하여 액세스 할 수 없습니다.{{ ... }}. 그 템플릿만 기능 관련된 뷰 인스턴스에서 메서드로 정의된 참조할 수 있다.

믹스인을 사용하여 원하는 작업을 수행할 수 있습니다.

// /src/functions.js
export default {
  methods: {
    // generate tokens
    tokenGenerator () { ... }
  }
}

<template>
  <div>{{ tokenGenerator }} </div>
</template>

<script>
import mixinFuncs from '../../functions'
export default { 
   mixins: [ mixinFuncs ],
}
</script>

여기 믹스인에 대한 문서가 있습니다.

---

에 액세스 할 필요가 있는 경우는,tokenGeneratorVue 스크립트로 기능하면 직접 내보내고 가져올 수 있습니다.

// /src/functions.js
// generate tokens
export const tokenGenerator = () => { 
  //... 
}

<template>
  <div> {{ token }} </div>
</template>

<script>
import { tokenGenerator } from '../../functions'

export default {
  data() {
    return {
      token: tokenGenerator()
    }
  }
}
</script>

여기 작업 예가 있습니다.

이 방법으로 functions.js로 내보냅니다.

export class util {
    static tokenGenerator() {
       //do your stuff here
    }
}

foo.vue의 경우:

<template>
  <div>{{ tokenGenerator }} </div>
</template>

<script>
import { util } from '../../functions';

export default {
  data() {
    return {
       textData: util.tokenGenerator
    }
  } 
}
</script>

언급URL : https://stackoverflow.com/questions/46347423/how-to-isolate-reusable-small-functions-in-vuejs