web-dev-qa-db-ja.com

カスタムコンポーネント内でVue.jsプラグインを使用する方法

テーブルを出力する必要があり、そのコンテンツはAjax経由で更新できます。だから私はvue-tables-2（ https://github.com/matfish2/vue-tables-2 ）これはVue.jsプラグインです。

Laravelの方法を使用して、Vue.jsカスタムコンポーネントを作成しているので、vue-tables-2コンポーネント内のプラグイン？

プラグインの使用例 https://jsfiddle.net/matfish2/jfa5t4sm/ の例を次に示します。残念ながらこの例では、プラグインをコンポーネント内にラップしていません。

javascriptlaravelvuejs2vue-componentvue-tables-2
8
Luigi T.

サードパーティのコンポーネントをカスタムVueコンポーネントで使用できるようにする方法は2つあります。

1.インポート（ES6）してローカルで使用する

コンポーネントのスクリプトブロックで、これを上に配置します。

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.アプリケーションのエントリポイントにグローバルにインポート（ES6）します。

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

次に、アプリケーションが繰り返し必要とするvue-tables-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アプリケーションでwebpackのようなビルドシステムを使用していない場合、3つ目の方法があります。

3. webpackなどを使用していないときにグローバルに利用可能にする

アプリケーションスクリプトを含める前に、これをHTMLに入れます。

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

これにより、グローバルVueTablesオブジェクトが公開されるため、アプリケーションのエントリポイントで次のことができます。

Vue.use(VueTables.ClientTable);

グローバルな方法を使用する場合は、カスタムコンポーネントのcomponentsオブジェクトでこれらのサードパーティコンポーネントを宣言する必要はありません。

どちらの方法を選択するのですか？

グローバルにインポートすることには、少ないコードを記述し、DRYの原則に従う必要があります（繰り返さないでください）。これは、アプリケーション全体の多くの点でそのプラグインが必要な場合に意味があります。サードパーティVueコンポーネント。

ただし、カスタムコンポーネントを複数のアプリケーションで再利用するのが難しくなる欠点があります。/projectsは、独自の依存関係を宣言しなくなったためです。

また、何らかの理由で独自のカスタムコンポーネントがアプリケーションから削除された場合でも、アプリケーションにはvue-tables-2パッケージが含まれますが、これは不要になる可能性があります。このシナリオでは、バンドルサイズが無用に増加します。

9
connexo

コンポーネントは、プロジェクトへのエントリポイントでVue.useを使用して、一度だけ登録されますglobally（例：main.js）。その後、それらをインポートせずに、すべての子孫の.vueファイルで使用できます。

0
Matanya

プラグインのインストール方法

だから指示に従ってください。

0
Pavel