カスタムコンポーネントの基本的な使い方-1

1. コンポーネントの参照方法はローカル参照とグローバル参照に分けられます。

次に、コンポーネントとページの違いは次のとおりです。

3. コンポーネントのスタイルの分離

4 番目に、データとプロパティの違い:

5、カスタムコンポーネント - データリスナー

6. 純粋なデータフィールド

7、コンポーネントのライフサイクル

8. スロット

1. コンポーネントの参照方法はローカル参照とグローバル参照に分けられます。

ローカル参照: コンポーネントは現在参照されているページでのみ使用できます。

グローバル参照: コンポーネントはすべてのアプレットページで使用できます。

ローカル参照:

次に、コンポーネントとページの違いは次のとおりです。

表面的には、コンポーネントとページは .js.json.wxml.wxss という 4 つのファイルで構成されていますが、明らかな違いがあります。

コンポーネントの .json ファイルは「component」を宣言する必要があります: true、

Component() 関数はコンポーネントの .js ファイル内で呼び出されます。

コンポーネントのイベントハンドラー関数は、コンポーネントのメソッドリストであるメソッドノードで定義する必要があります。

3. コンポーネントのスタイルの分離

デフォルトでは、カスタムコンポーネントのスタイルは現在のコンポーネントに対してのみ有効であり、コンポーネントの外部の UI 構造には影響しません。

コンポーネント A のスタイルはコンポーネント C のスタイルに影響を与えません

コンポーネント A のスタイルは、アプレットページのスタイルには影響しません。

アプレットページのスタイルは、コンポーネント A および C のスタイルには影響しません。

利点：

外部スタイルがコンポーネント内のスタイルに影響を与えないようにする

コンポーネントスタイルが外部スタイルを破壊しないようにする

コンポーネントのスタイル分離に関する注意事項:

app.wxss のグローバルスタイルはコンポーネントには影響しません

スタイル分離の効果があるのはクラスセレクターのみです。ID セレクター、属性セレクター、およびラベルセレクターはスタイル分離の影響を受けません。

提案: コンポーネントおよびコンポーネントを参照するページではクラスセレクターを使用し、ID セレクター、属性セレクター、ラベルセレクターは使用しないでください。

スタイル分離設定:

オプション: {

styleIsolation: "isorated" //コンポーネントのスタイル分離オプションを変更します

}、

孤立とは、スタイルの分離が有効であり、クラスで指定されたスタイルがカスタムコンポーネントの内部と外部で相互に影響を及ぼさないことを意味します。

apply-shared は、ページの wxss スタイルはカスタムコンポーネントに影響しますが、カスタムコンポーネントの wxss スタイルはページには影響しないことを意味します。

共有とは、ページの wxss スタイルがカスタムコンポーネントに影響し、カスタムコンポーネントの wxss スタイルがページやその他の設定にも影響することを意味します。

4 番目に、データとプロパティの違い:

データとプロパティデータの使用法は同じで、どちらも読み取りと書き込みが可能です。

データはコンポーネントのプライベートデータを保存する傾向があります

プロパティは、外部からコンポーネントに渡されるデータを保存する傾向が高くなります。

// components/test4/test4.js
Component({
  observers: {
    'n1,n2': function(n1, n2) {
      this.setData({
        sum: n1 + n2
      });
    }
  },
  options: {
    styleIsolation: "isolated" //修改组件的样式隔离选项
  },
  /**
   * 组件的属性列表(properties是组件的对外属性，用来接受外界传递到组件中的数据)
   */
  properties: {
    max: { //完整定义属性的方式【当需要指定默认值时，建议使用此方式】
      type: Number, //属性值的数据类型
      value: 10 //属性默认值
    },
    min: Number //简化定义属性的方式【不需要指定属性默认值时，可以使用简化方式】
  },

  /**
   * 组件的初始数据【组件的私有数据】
   */
  data: {
    count: 0,
    n1: 0,
    n2: 0,
    sum: 0,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    addN1() {
      this.setData({
        n1: this.data.n1 + 1
      });
    },
    addN2() {
      this.setData({
        n2: this.data.n2 + 1
      });
    },
    addCount() {
      this.setData({
        count: this.data.count + 1
      });
      this._showCount();
    },
    _showCount() {
      wx.showToast({
        title: 'count值为:'+this.data.count,
      });
    }
  }
})

5、カスタムコンポーネント-データリスナー

データリスナーは、属性やデータフィールドの変更を監視して応答するために使用され、それによって特定の操作が実行されます。

5.1、データリスナーの基本構文:

5.2、データリスナーの基本的な使用法:

5.3、オブジェクトプロパティの変更を監視する

データリスナーは、オブジェクト内の 1 つまたは複数のプロパティの変更の監視をサポートします

5.4、オブジェクト内の指定された属性の変更を監視する

5.5、オブジェクト内のすべてのプロパティの変更を監視する

オブジェクト内で監視する必要があるプロパティが多すぎる場合は、便宜上、ワイルドカード ** を使用して、オブジェクト内のすべてのプロパティの変更を監視できます。

6. 純粋なデータフィールド

6.1 概念: 純粋なデータフィールドとは、インターフェイスのレンダリングに使用されない日付フィールドを指します。

アプリケーションシナリオ: 場合によっては、一部のデータのフィールドがインターフェイスに表示されず、他のコンポーネントにも渡されません。

前のコンポーネントによって内部的に使用されます。この機能を持つデータフィールドは、純粋なデータフィールドとして設定するのに適しています。

利点: 純粋なデータフィールドにより、ページ更新のパフォーマンスが向上します。

6.2. 使用規則

pureDataPattern をComponent コンストラクターのオプションノードで正規表現として指定すると、フィールド名がこの正規表現と一致するフィールドが純粋なデータフィールドになります。

7、コンポーネントのライフサイクル

7.1. コンポーネントで利用可能なすべてのライフサイクル機能

アプレットコンポーネントには、作成、アタッチ、デタッチという 3 つの最も重要なライフサイクル関数があります。

//生命周期函数
  lifetimes: {
    //在组件实例刚被创建时执行,此时还不能调用setData,通常在此时给组件this添加一些自定义的属性字段
    created() {
      console.log('created');
    },
    //在组件完全初始化完毕，进入页面节点树时执行，此时this.data已经初始化完毕，这个生命周期很有用，绝大多数初始化工作可以在此时进行
    attached() {
      console.log('attached');
    },
    //在组件实例被移除节点树时执行，适合做一些清理性质的工作
    detached() {
      console.log('detached');
    }
  },

7.2. コンポーネントが配置されているページのライフサイクル

カスタムコンポーネントの動作がページの状態の変化に依存する場合がありますが、この場合、コンポーネントが配置されているページのライフサイクルを使用する必要があります。

たとえば、ページのライフサイクル表示関数がトリガーされるたびに、ランダムな RGB カラーを再生成できるようにしたいと考えています。

// 组件所在页面的生命周期函数
  pageLifetimes: {
    // 页面被展示
    show() {
      this._randomColor();
      console.log('show');
    },
    // 页面被隐藏
    hide() {
      console.log('hide');
    },
    // 页面尺寸变化
    resize() {
      console.log('resize');
    }
  }

8. スロット

カスタムコンポーネントの wxml 構造では、コンポーネントユーザーが提供した wxml 構造を保持するために<slot>ノード (スロット)を提供できます。

8.1. シングルスロット

アプレットでは、デフォルトで、各カスタムコンポーネントで使用できる <slot> は 1 つだけです。この数の制限は、単一スロットと呼ばれます。

<!--components/test2/test2.wxml-->
<!-- 组件的封装者 -->
<view class="wrapper">
<view>这里是组件的内部节点</view>
<!-- 对于不确定的内容，可以使用<slot> 进行占位，具体的内容由组件的使用者决定-->
<slot></slot>
</view>

<!--组件的使用者需要再json文件中-->
{
  "usingComponents": {
    "Test2":"../../components/test2/test2"
  },
}

<Test2>
<view>这是插入到组件slot中的内容</view>
</Test2>

最終的な表示結果:

8.2. 複数のスロット

<!--components/test2/test2.wxml-->
<view>
  <view>
    这里是组件的内部节点-上
  </view>
  <!-- 对于不确定的内容，可以使用<slot>进行占位，具体的内容由组件的使用者决定 -->
    <slot name="first"></slot>
    <view>
      这里是组件的内部节、点-下
    </view>
    <slot name="second"></slot>
</view>

<Test2>
<view slot="first">这是插入到组件slot name="first"中的内容</view>
<view slot="second">这是插入到组件slot name="second"中的内容</view>
</Test2>

最終的な表示効果: