Vueコンポーネント

Vue用のWijmo コンポーネント は、VueテンプレートマークアップでWijmo コントロール を使用できるようにします。 Wijmo Vue コンポーネント は、それが表すWijmo コントロール のラッパーです。コンポーネント は、背後でWijmo コントロール を作成し、controlプロパティを介してコントロールインスタンスへの参照を提供します。コンポーネント を使用すると、Vueテンプレートマークアップで宣言的に コントロール のプロパティとイベントに連結できます。

Wijmo Vueコンポーネントは、名前に「vue2」を含む一連のモジュール（1つのコアライブラリモジュールに対して1つのモジュール）として出荷されています。たとえば、「wijmo.vue2.grid」パッケージは、コアの「wijmo.grid」パッケージのコントロールのコンポーネントを表します。パッケージは別々にインストールすることも、「@mescius/wijmo.vue2.all」グループパッケージを使ってまとめてインストールすることもできます。

npm install @mescius/wijmo.vue2.all

Wijmo npmパッケージの詳細については、npmによるWijmoの参照トピックを参照してください。

その後、ESMのimportステートメントを使用してモジュールをインポートできます。たとえば、次のimport文は"wijmo.vue2.grid"モジュールの内容をインポートします。

import '@mescius/wijmo.vue2.grid';

Wijmoコンポーネントのインポート

この設定により、Wijmo Vueモジュールをインポートし、モジュールに含まれるコンポーネントを使用できます。たとえば、次のコードは、wj-flex-gridコンポーネントをAppコンポーネントのテンプレートに追加します。

<template>
    <wj-flex-grid :items-source="data"></wj-flex-grid>
</template>

<script>
import Vue from 'vue';
import '@mescius/wijmo.vue2.grid';
import { getData } from './data';

let App = Vue.extend({
    name: 'app',
    data: function () {
        return {
            data: getData()
        }
    }
})
</script>

Wijmo Vueコンポーネントはグローバルに登録されているので、@mescius/wijmo.vue2.* モジュールから特定のクラスや変数をインポートする必要はありません。このため、from節なしでimportステートメントを使用できます。Wijmo Vueモジュールは、シングルページアプリケーションのルートモジュールのどこかに一度だけインポートすれば十分です。モジュールを複数回インポートすることもできます。

Wijmo CSSの追加

Wijmoコントロールを正常に表示および動作させるには、Wijmo CSSファイルをアプリケーションにロードする必要があります。スタイルは @mescius/wijmo.styles npmパッケージに含まれます。主要なCSSファイルは2つあります。

wijmo.css：すべてのWijmoコントロールのスタイルが含まれます。
wijmo-core.css：wijmo.cssの縮小版で、Enterprise専用コントロールのスタイルは含まれません。

アプリケーションのルートコンポーネントファイルにスタイルを読み込むことができます。単一ファイルコンポーネントの.vueファイルを使用する場合は、styleセクションの先頭に次のようなCSS importステートメントを追加します。

@import '../node_modules/@mescius/wijmo.styles/wijmo.css';

ここでは、CSSファイルへの相対パスをnodemodules_フォルダーを含めて指定する必要があることに注意してください。

通常の.jsファイルを使用する場合は、ファイルの先頭に次のESMインポートステートメントを追加します。

@import '@mescius/wijmo.styles/wijmo.css';

Vueマークアップ構文

Wijmo Vueコンポーネントは、テンプレートマークアップで一貫した命名規則を使用します。コンポーネントに使用されるHTMLの要素名と属性名は、次の単純な規則を使用してコンポーネントクラスとメンバー名から簡単に推測できます。

Wijmoコンポーネントを表すHTML要素名は、小文字ハイフン構文を使用して指定されます。たとえば、WjInputNumberコンポーネントは、wj-input-numberのように記述する必要があります。

<wj-input-number :value="amount"></wj-input-number>

Wijmoコンポーネントのプロパティおよびイベントを表す属性の名前も、小文字のハイフンを使用して指定されます。名前の前にv-bind:ディレクティブ（またはその省略形の:）を追加する必要があります。v-bind:ディレクティブを省略できる唯一の例外は、文字列型プロパティを文字列定数に連結するときです。

<wj-input-number
    :value="amount" // binding to a component property
    format="n0" // binding to a string constant
    :is-read-only="true" // binding to boolean
    :value-changed="valueChanged"> // event binding
</wj-input-number>

イベント連結の詳細

Wijmoイベントハンドラは、送信元とイベント引数の２つのパラメータを持つ関数として定義されます。コンポーネントイベントに連結するときは、連結ソースとしてこのシグネチャを持つ関数の名前を指定する必要があります。

<wj-input-number 
    :value="amount" 
    :value-changed="onValueChanged"> 
</wj-input-number>

methods: {
    onValueChanged: function(sender, args) {
        this.amount = sender.value;
    },
    ...
}

「initialized」イベント

すべてのWijmo Vueコンポーネントには、コントロールがページに追加され初期化された後に発生する「initialized」イベントが含まれています。

このイベントを使用して、マークアップでプロパティを設定するだけでなく、さらに初期化することもできます。ハンドラ関数のシグネチャは、他のWijmoイベントハンドラと同じです。

<wj-flex-grid :initialized="initGrid">
</wj-flex-grid>

methods: {
    initGrid: function(grid, args) {
        grid.mergeManager = new CustomMerge(grid);
    },
    ...
}

コードでのWijmoコントロールの作成

Vue用のWijmo コンポーネント は、テンプレートマークアップで使用されます。コードでWijmoコントロールを作成する場合は、コンポーネントではなく、その目的で用意されているコアモジュールのWijmo コントロール を使用する必要があります。コアモジュールの名前は、対応するVue相互運用モジュール名から「vue2」を省略した名前と同じです。たとえば、次のコードは、コードでFlexGridコントロールを作成します。

import { FlexGrid } from '@mescius/wijmo.grid';
let flex = new FlexGrid('#host_element');

Vueコンポーネント
Wijmoコンポーネントのインポート
Wijmo CSSの追加
Vueマークアップ構文
イベント連結の詳細
「initialized」イベント
コードでのWijmoコントロールの作成