커스텀 컴포넌트 내에서 Vue.js 플러그인을 사용하는 방법

커스텀 컴포넌트 내에서 Vue.js 플러그인을 사용하는 방법

Ajax를 통해 업데이트할 수 있는 컨텐츠와 표를 출력해야 합니다.그래서 저는 이 제품을vue-tables-2(Vue.js 플러그인인 https://github.com/matfish2/vue-tables-2)).

Laravel 방식을 사용하여 Vue.js 커스텀컴포넌트를 쓰고 있는데 어떻게 하면vue-tables-2플러그인이 내 컴포넌트 안에 있습니까?

다음은 플러그인 https://jsfiddle.net/matfish2/jfa5t4sm/을 사용하는 방법의 예입니다. 안타깝게도 이 예에서는 플러그인을 컴포넌트 안에 랩하지 않습니다.

사용자 지정 Vue 구성 요소에 타사 구성 요소를 사용할 수 있도록 하려면 다음 두 가지 방법을 사용할 수 있습니다.

1. (ES6)를 Import하여 로컬로 사용

컴포넌트의 스크립트 블록에서 다음 내용을 맨 위에 배치합니다.

import { ServerTable, ClientTable, Event } from 'vue-tables-2'

컴포넌트 VM에서 이 값을components속성:

export default { 
  data () { 
    return { /* data properties here */ }
  }, 
  components: {
    ServerTable, ClientTable, Event
  }
}

이제 를 사용할 수 있습니다.<v-server-table>,<v-client-table>컴포넌트 템플릿에 포함시킵니다.

2. 어플리케이션의 엔트리 포인트로 글로벌하게 Import(ES6)합니다.

import { ServerTable, ClientTable, Event } from 'vue-tables-2'

그런 다음 애플리케이션에 반복적으로 필요한 vue-table-2의 해당 부분을 기본 Vue 파일과 모든 하위 구성 요소에 사용할 수 있도록 합니다.

Vue.use(ClientTable, [options = {}], [useVuex = false], [theme = 'bootstrap3'], [template = 'default']);

또는/또는:

Vue.use(ServerTable, [options = {}], [useVuex = false], [theme = 'bootstrap3'], [template = 'default']);

이는 vue-tables-2 설명서 GitHub 페이지에서도 확인할 수 있습니다.

주의: Vue 응용 프로그램에서 웹 팩과 같은 빌드 시스템을 사용하지 않는 경우 세 번째 방법이 있습니다.

3. 웹팩 등을 사용하지 않을 때 글로벌하게 이용 가능

응용 프로그램스크립트를 포함하기 전에 다음 내용을 HTML에 입력해 주세요.

<script src="/path/to/vue-tables-2.min.js"></script>

그러면 글로벌이 노출됩니다.VueTables어플리케이션의 엔트리 포인트에서 할 수 있도록 오브젝트를 설정합니다.

Vue.use(VueTables.ClientTable);

글로벌 방식을 사용하는 경우, 이러한 서드파티 컴포함할 필요가 없습니다.components커스텀 컴포넌트의 오브젝트.

내가 왜 다른 방법보다 어느 방법을 택하겠어?

글로벌 Import는 코드 쓰기를 줄이고 DRY 원칙을 따를 수 있다는 장점이 있습니다(반복하지 마십시오).따라서 전체 애플리케이션에 해당 플러그인/서드파티 Vue 구성 요소가 필요한 경우가 많습니다.

단, 사용자 지정 구성 요소가 더 이상 자체 종속성을 선언하지 않기 때문에 여러 애플리케이션/프로젝트에서 재사용하기가 더 어려워진다는 단점이 있습니다.

또한 어떤 이유로 사용자 고유의 커스텀컴포넌트가 어플리케이션에서 삭제되어도 어플리케이션에는 vue-tables-2 패키지가 포함되어 있어 더 이상 필요하지 않을 수 있습니다.이 시나리오에서는 번들사이즈가 불필요하게 증가합니다.

되어 있을 때 합니다.created:

created() {
    Vue.use(MustUsePlugin, { someOption: this.someProp });
},

컴포넌트는 글로벌하게1회만 등록됩니다.Vue.use(main.js할 수 있습니다..vue수입하다

확장하거나 github에서 다운로드하여 직접 편집할 수 있습니다.

플러그인 설치 방법

그러니 그냥 지시에 따르세요.

언급URL : https://stackoverflow.com/questions/48066237/how-to-use-a-vue-js-plugin-inside-a-custom-component