中年システムエンジニアのオモチャ箱

中年システムエンジニアが初体験のブログ活動。技術情報の備忘録以外も、色々と載せていければと思います。

【スポンサーリンク】

 

Monaca 自作コンポーネントを作成しよう Onsen UI+Vue


【スポンサーリンク】


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

www.ma-se.com

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

 

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

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

  1. src フォルダ上で右クリックし、新規ファイル作成を選択します。

    f:id:middle-aged-se:20190706133253j:plain

  2. ファイル名に「CompMyBtn.vue」を入力[1]し、OK ボタン[2]をクリックします。

    f:id:middle-aged-se:20190706133257j:plain

  3. 下記のとおりファイルが作成されます[1]ので、ダブルクリックしてファイルを開いてください。
    空のテキストエディタが表示されます[2]。

    f:id:middle-aged-se:20190706133300j:plain

  4. 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>

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

  

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

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

  1. 自作コンポーネントを 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>

  2. 自作コンポーネントのファイルを使用する宣言(import)を記載するため、App.vue の 32 行目を変更します。
    変更した結果、32、33 行となります。
    変更前ソース

    <script>

    変更後ソース

    <script>

      import compMyBtn from './CompMyBtn';

  3. 自作コンポーネントのファイルをコンポーネントとして使用するため、App.vue の 46 行目を変更します。
    46 行目は、最後に「,」を追加するだけです。
    変更した結果、46 ~ 49 行となります。
    変更前ソース

    }

    変更後ソース

    },

    components: {

      compMyBtn

    }

  4. 下記のようなソースファイル[1]になっているでしょうか?
    変更したファイルを保存し、プレビュー画面を最新にすると、下記[2]のように表示されると思います。

    f:id:middle-aged-se:20190706133303j:plain

  5. 動作確認をしてみましょう。
    アラート表示ボタンをクリックしてください。

    f:id:middle-aged-se:20190706133307j:plain

    下記のとおり、アラートダイアログが表示されましたね。

    f:id:middle-aged-se:20190706133311j:plain

  6. 下記アドレスに Monaca デバッガーを使用して動かしているところを動画として Twitter にアップしましたので参考にしてください!

 

 

 

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

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

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

 

如何だったでしょうか。
自作コンポーネントを作成し、簡単に利用することができましたね!
次回は自作コンポーネントに値を渡したり、自作コンポーネントから親メソッドを呼び出す方法について記載したいと思います!

Monacaで学ぶはじめてのプログラミング ~モバイルアプリ入門編~ [ アシアル株式会社 ]

価格:3,240円
(2019/5/19 15:34時点)
感想(0件)

クラウドでできるHTML5ハイブリッドアプリ開発 Monaca公式ガイドブック Cordova/Onsen UIで作るiOS/Android両対応アプリ Cordova/Onsen UIで作るiOS/An [ 永井勝則 ]

価格:3,240円
(2019/5/19 15:34時点)
感想(2件)

Vue.js入門 基礎から実践アプリケーション開発まで [ 川口和也 ]

価格:3,650円
(2019/6/1 19:40時点)
感想(0件)

基礎から学ぶVue.js [ mio ]

価格:3,693円
(2019/6/1 19:40時点)
感想(0件)