WeChatアプレットのカスタムコンポーネントの仕上げの概要（ケースの説明、ページはタグ属性を介してパラメーターをサブコンポーネントに渡し、サブコンポーネントはプロパティを介して受信し、サブコンポーネントはトリガーイベントを介してページにパラメーターを渡します、スロット

序文：コンポーネントはコンポーネントフォルダーに配置され、ページはページフォルダーに配置
され、イベントコールバック関数は、page.jsファイルに格納されるときと同じレベルのデータに格納されます。！！
イベントコールバック関数がcomponent.jsファイルに格納されている場合、メソッドに存在している必要があります。！！
混同しないでください

ここに画像の説明を挿入
例で説明する

最初にカスタムコンポーネントを紹介し、その後、親コンポーネントと子コンポーネントを含めてパラメーターを渡します

効果画像：
ここに画像の説明を挿入

コンポーネントの使用

まず、共通ヘッダを抽出するために使用されるこのようなタブとしてファイルコンポーネント、内のファイルに新しいフォルダを作成し、タブビュータブページの使用と同じであってもよく、その<Tabs></Tabs>
要件：
サブコンポーネント：コンテンツを書き込むためのwxmlの必要性は、親アセンブリに表示された
ページ：JSONで最初にサブコンポーネントを紹介し、次にタグを使用してサブコンポーネントを提示する

具体的な操作は次のとおりです。

まず、Tab.wxmlにコンテンツを記述します

<view class="tabs">
  <view class="tabs_title">
    <view 
    wx:for="{{tabs}}"
    wx:key="id"
    class="title_item {{item.isActive?'active':''}}"
    bindtap="hanldeItemTap"
    data-index="{{index}}"
    >
    {{item.name}}
  </view>
  </view>
</view>

Tab.jsファイル、最初にサブコンポーネントをシミュレートしてデータをシミュレートし、操作する

Component({
  data: {
    tabs: [
      {
        id: 0,
        name: "首页",
        isActive: true
      },
      {
        id: 1,
        name: "原创",
        isActive: false
      }
      ,
      {
        id: 2,
        name: "分类",
        isActive: false
      }
      ,
      {
        id: 3,
        name: "关于",
        isActive: false
      }
    ]
  },
  methods: {
    hanldeItemTap(e) {
      /* 
      1 绑定点击事件  需要在methods中绑定
      2 获取被点击的索引 
      3 获取原数组 
      4 对数组循环
        1 给每一个循环性 选中属性 改为 false
        2 给当前的索引的 项 添加激活选中效果就可以
      */
      //  2 获取索引，解构赋值
      const { index } = e.currentTarget.dataset;
      // 3 获取data中的数组
      // 最严谨的做法：重新拷贝一份数组，再对这个数组的备份进行处理，
      let tabs=JSON.parse(JSON.stringify(this.data.tabs));
      // 4 循环数组
      // [].forEach 遍历数组 遍历数组的时候 修改了 v ，也会导致源数组被修改
      tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
      this.setData({
        tabs
      })
    }
  }
})

ページでTabsカスタムコンポーネントを使用するのは非常に簡単です。コンポーネントを記録するには、ページフォルダーのjsonファイルに以下を追加する必要があります。

{
  "usingComponents": {
    "Tabs":"../../components/Tabs/Tabs"
  }
}

wxml

<Tabs></Tabs>

wcss

.tabs_title{
  display: flex;
  padding: 10rpx 0;
}
.title_item{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.active{
  color:red;
  border-bottom: 5rpx solid currentColor;
}

ここに画像の説明を挿入

とてもシンプルに見えますか？

ここに画像の説明を挿入
しかし、継承についてはどうですか？

コンポーネントパラメータ

次に、コンポーネントのパススルーを開始します。

詳細は次のとおりです。
ページはタグ属性を介してサブコンポーネントにパラメーターを渡し、サブコンポーネントはプロパティを介して受信し、サブコンポーネントはトリガーイベントを介してパラメーターをページに渡します。

ページ（親）：

子コンポーネントへのデータの転送：たとえばtabs="{{tabs}}"、子コンポーネントのラベル（このラベルは親コンポーネントにあります）では、ページで定義されたタブデータはtabs属性を介して渡されます。
サブコンポーネントデータの受信：カスタムイベントをサブコンポーネントラベルに追加します（このラベルは親コンポーネントのタブです）。

<Tabs tabs="{{tabs}}" binditemChange="handleItemChange" >
</Tabs>

ここに画像の説明を挿入
子コンポーネントから渡されたデータを受け取るときは、子コンポーネントが渡されるときに親コンポーネントのメソッド名に注意してください。つまり、子コンポーネントがitemChangeを使用して渡す場合、親コンポーネントはbindidemChangeを使用して親コンポーネントのメソッドをバインドする必要があります。受け取ります。

子コンポーネント：
3.親からデータを受信します。次のように、子コンポーネントの下にデータのデータとして直接使用できるプロパティがあり、親コンポーネントから受信したデータを格納します。

properties: {
    tabs:{
      type:Array,
      value:[]
    }
  }

親にデータを渡す：カスタムイベント（現在のインデックスインデックスなど）を介して渡されるデータをバインドします。操作は次のとおりです。

//this.triggerEvent("父组件自定义事件的名称",要传递的参数)
this.triggerEvent("itemChange",{index});

コードの実装

親コンポーネントのjsファイル

Page({
  data: {
    tabs: [
      {
        id: 0,
        name: "首页",
        isActive: true
      },
      {
        id: 1,
        name: "原创",
        isActive: false
      }
      ,
      {
        id: 2,
        name: "分类",
        isActive: false
      }
      ,
      {
        id: 3,
        name: "关于",
        isActive: false
      }
    ]

  },
  // 自定义事件 用来接收子组件传递的数据的
  handleItemChange(e) {
    // 接收传递过来的参数
    const { index } = e.detail;
    let { tabs } = this.data;
    tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
    this.setData({
      tabs
    })
  }
})

親コンポーネントwxml

<Tabs tabs="{{tabs}}" binditemChange="handleItemChange" >
</Tabs>

サブコンポーネントwxml

<view class="tabs">
  <view class="tabs_title">
    <view 
    wx:for="{{tabs}}"
    wx:key="id"
    class="title_item {{item.isActive?'active':''}}"
    bindtap="hanldeItemTap"
    data-index="{{index}}"
    >
    {{item.name}}
  </view>
  </view>
</view>

サブコンポーネントjs

// components/Tabs.js
Component({
  properties: {
    tabs:{
      type:Array,
      value:[]
    }
  },
  data: {
  },
  methods: {
    hanldeItemTap(e){
      const {index}=e.currentTarget.dataset;
      // 5 触发父组件中的自定义事件 同时传递数据给  
      this.triggerEvent("itemsChange",{index});
    }
  }
})

この時点で、カスタムコンポーネントの使用とパラメーターの受け渡しが完了しました

ここに画像の説明を挿入

内容を要約してください！！

親コンポーネントが子コンポーネントを使用したい場合は、まずjsonに導入してから、ページで子コンポーネントタグ<child component name> </ child component name>を使用します

親コンポーネントは、独自のページの子タグを通じて子コンポーネントにパラメーターを渡し、子コンポーネントによって渡されたメソッド名を通じてバインドおよび受信するメソッドを渡します

子コンポーネントは、バインディングメソッドを介して親コンポーネントにパラメーターを渡し、プロパティを介して受け取ります。

もう1つのポイントは、子コンポーネントのラベルコンテンツに記述された親コンポーネントの要素が表示される場合、スロットが使用されることです。

スロット

スロットラベルは実際にはプレースホルダースロットであり、子コンポーネントに書き込まれて、ラベルを介して渡された親コンポーネントを受け取ります。
親コンポーネントが子コンポーネントを呼び出すと、ラベルが渡されます。最後に、これらの渡されたラベルがスロットを置き換えますスロット位置

サブコンポーネントwxml、スロットを追加


<view class="tabs">
  <view class="tabs_title">
    <view 
    wx:for="{{tabs}}"
    wx:key="id"
    class="title_item {{item.isActive?'active':''}}"
    bindtap="hanldeItemTap"
    data-index="{{index}}"
    >
    {{item.name}}
  </view>
  </view>
  <view class="tabs_content">
    <slot></slot>
  </view>
</view>

親コンポーネントwxml、blockは子コンポーネントに渡されるコンテンツであり、スロットを置き換えます

<Tabs tabs="{{tabs}}" binditemChange="handleItemChange" >
<block wx:if="{{tabs[0].isActive}}">0 </block>
<block wx:elif="{{tabs[1].isActive}}">1 </block>
<block wx:elif="{{tabs[2].isActive}}">2 </block>
<block wx:else>3</block>

</Tabs>