マイクロ手紙アプレット - 部品|カスタムコンポーネント|コンポーネントイベント配信ページ

 

パッケージ

アプレットは、私たちは、カスタムコンポーネントのページVueのウィジェットを構築するための同様の方法を使用することができます

カスタムコンポーネント

ページと同様に、カスタムアセンブリが構成され  json、  wxml, wxss, js 4つのファイルを

1.作成します。

1.フォルダのコンポーネントを作成します。

2.コンポーネントのCOMP1ファイルにフォルダを作成します。

3.comp1フォルダ、コンポーネントファイルを作成します

2.文のコンポーネント

まず、あなたがする必要がある  json カスタムコンポーネント宣言ファイルも

{
     "コンポーネント"：trueに、   // 自動的に生成 
}

 

3.シリーズアセンブリ

内の他のページと同じように  wxml コンポーネントテンプレートファイルの作成、  wxss 追加コンポーネントのスタイルファイル

注意：セレクタアセンブリのwxssのID、タグのname属性セレクタとセレクタを使用しないでください。

comp.wxml

<！ - これは、カスタムコンポーネントWXML内部構造である- > 
< テキスト> {} {}のinnerText </ テキスト>

 

4.登録コンポーネント

カスタムコンポーネントで  js 必要なファイル  Component() のコンポーネントを登録するには、コンポーネント属性の定義とは、内部データとカスタムメソッドを提供します

comp.js

成分（{
  特性：{
    // これは、アセンブリを使用した場合のinnerTextプロパティは、プロパティ値を指定することができる定義
    のinnerText：{
      タイプ：文字列、
      値：「デフォルト値」、
    }
  }、
  データ：{
    // ここでは、データの内部構成要素の一部である
    someDataがは：{}
  }、
  方法：{
    // これは、カスタム方法で 
    customMethod：関数（）{}
  }
}）

// JS compinentの類似したページファイルページ
にある//プロパティのjs類似文書ページデータ

 

カスタムコンポーネントを使用します

1.導​​入手段

ページでは  json 、ファイルの文を参照。しかし、また、対応するコンポーネント名とコンポーネント・パスを提供するために

test.json

{
   "UsingComponents" {
     "のCoMP"： "/コンポーネント/ COMP / CoMPの"   // コンポーネントパス
  }、
   "navigationBarTitleText"： "カスタム・コンポーネント"   // コンポーネントページヘッダ名 
}

 

コンポーネントを使用して2ページ

test.wxml

< CoMPののinnerText =「再割り当て」> </ CoMPの>   
<！ - コンポーネントのホーム参照コンポーネントを再割り当て直しすることができたときの変数- >

 

コンポーネントは、イベントページを渡します

コンポーネント：

comp.wxml

< ボタンバインド：TAP =「クリック」  データ-SS =「123」>ボタン</ ボタン>   ページをレンダリングする//ボタン

 

comp.js

実現にJSファイルコンポーネントのメソッドのメソッド、プロパティにイベントコンポーネント

方法：{
    クリック：関数（E）{
       // はconsole.log（E）
      本 .triggerEvent（ "ICRE"、{ "インデックス"：323 }、{}）
    }
  }
// ページに転送するためのTriggereventキーイベント
// バインドによってICER（カスタマイズ）ページ：ICREイベント取得コンポーネント
// {「インデックス」：323}イベントは、データ・コンポーネントを運びます

 

ページ：

test.wxml

< コンプバインド：ICRE = "クリック" > </ COMP >

 

test.js

ページ（{
   データ{
    A： 0 、
}、
//イベントページのICERは達成 
：クリック機能{（E）を
    console.log（E）
    この.setData（{
      確かに、これは +1を.data.num
    }）
    // this.data.num = this.data.num + 1 
  }、

}）