Monaca 自作コンポーネントを作成しよう Onsen UI＋Vue - 中年システムエンジニアのオモチャ箱

前回は、入力コントロールで入力した値をリアルタイムに画面に表示してみました。

www.ma-se.com

今回は、前回作成したプロジェクトを使用して、自作コンポーネントを作成し利用したいと思います！

コンポーネントファイルの作成方法

コンポーネントファイルと言っても、通常の vue ファイルと変わりません。
下記の通り作成してみましょう！

src フォルダ上で右クリックし、新規ファイル作成を選択します。
ファイル名に「CompMyBtn.vue」を入力［1］し、OK ボタン［2］をクリックします。
下記のとおりファイルが作成されます［1］ので、ダブルクリックしてファイルを開いてください。
空のテキストエディタが表示されます［2］。
CompMyBtn.vue ファイルに下記内容を記載してください。

CompMyBtn.vue
<template>

<v-ons-button style="background-color:#0000D0" @click="alert">

アラート表示

</v-ons-button>

</template>

<script>

export default {

methods: {

alert() {

this.$ons.notification.alert('自作コンポーネントからアラートを表示');

}

}

}

</script>

コンポーネントファイルと言っても、他のページファイルと同様に記載することで作成できます。
上記はアラート表示ボタンをクリックすると、「自作コンポーネントからアラートを表示」とアラートダイアログを表示する処理を記載しています。

自作コンポーネントの利用

既存の画面で、作成した自作コンポーネントを利用してみましょう！

自作コンポーネントを 3 つ目の枠（div）の下に表示するため、App.vue ファイルの 27 行目を変更します。
変更した結果、27 ～ 30 行となります。

変更前ソース
</v-ons-page>

変更後ソース
<div style="margin:10px; padding:20px; display:block; border-style:groove;">

<comp-my-btn></comp-my-btn>

</div>

</v-ons-page>
自作コンポーネントのファイルを使用する宣言（import）を記載するため、App.vue の 32 行目を変更します。
変更した結果、32、33 行となります。

変更前ソース
<script>

変更後ソース
<script>

import compMyBtn from './CompMyBtn';
自作コンポーネントのファイルをコンポーネントとして使用するため、App.vue の 46 行目を変更します。
46 行目は、最後に「,」を追加するだけです。
変更した結果、46 ～ 49 行となります。

変更前ソース
}

変更後ソース
},

components: {

compMyBtn

}
下記のようなソースファイル［1］になっているでしょうか？
変更したファイルを保存し、プレビュー画面を最新にすると、下記［2］のように表示されると思います。
動作確認をしてみましょう。
アラート表示ボタンをクリックしてください。

下記のとおり、アラートダイアログが表示されましたね。
下記アドレスに Monaca デバッガーを使用して動かしているところを動画として Twitter にアップしましたので参考にしてください！

Monacaデバッガーで実際に動かしている動画も参考にしてくださいね😊#スマホアプリ開発 #Monaca pic.twitter.com/ExkUK5Byur
— 中年SE (@middle_aged_se) July 6, 2019

自作コンポーネントの作成および利用方法

今回、CompMyBtn という自作コンポーネントを作成し、画面から利用してみました。
作成および利用する手順については下記で行いました。

自作コンポーネントのファイルを作成
今回の場合は「CompMyBtn.vue」です。
script ブロックに自作コンポーネントのファイルを使用する変数宣言（import）
今回の場合は 33 行目です。
尚、ファイル名と変数を区別するため、先頭のアルファベットを小文字にしています。
　ファイル名：CompMyBtn.vue
　変数名：compMyBtn
コンポーネントとして利用する設定
今回の場合は 47 ～ 49 行目です。
template ブロックに表示するための HTML を記載
今回の場合は 28 行目です。
尚、コンポネントとして使用する際、ケバブケース（大文字／小文字をハイフンで区切って、小文字表記したもの）で指定します。
　ファイル名：CompMyBtn.vue
　コンポーネント名：comp-my-btn