修改自定義的組件中的數(shù)據(jù)為動態(tài)

具體要引用的wxml中傳給自定義控件要顯示的內(nèi)容 , 這個過程叫父向子傳遞數(shù)據(jù)
自定義控件選中的item的index回傳給引用的文件 , 這個過程叫子向父傳遞數(shù)據(jù)

一、父向子傳遞數(shù)據(jù)

父組件(頁面)向子組件傳遞數(shù)據(jù),通過標簽屬性的方式來傳遞
1. 在子組件上進行接收
2. 把這個數(shù)據(jù)當成是data中的數(shù)據(jù)直接用即可

自定義組件父像子傳遞數(shù)據(jù)

寫一個簡單的父向子傳遞數(shù)據(jù)的Demo

要引用自定義控件.wxml

<Tabs aaa={{a123a}}></Tabs>

自定義控件.js

/**
   * 里邊存放的是要從父組件中接收的數(shù)據(jù)
   * 組件的屬性列表
   */
  properties: {
    //要接受的數(shù)據(jù)的名稱
    aaa:{
      //type 要接收的數(shù)據(jù)的類型
      type:String,
      //value 默認值
      value:""
    }
  },

自定義控件.wxml

<view>{{aaa}}</view>  

引用自定義控件文件顯示出的效果

tabs自定義控件父向子傳遞數(shù)據(jù)(傳遞tabs要顯示的list數(shù)據(jù))

1. 之前寫在tabs.js中的list需要放在父控件中 , 由父控件傳入到自定義控件中
   要引用自定義控件.js

data: {
    tabs: [
      {
        id: 0,
        name: '首頁',
        isActive: true
      },
      {
        id: 1,
        name: '原創(chuàng)',
        isActive: false
      },
      {
        id: 2,
        name: '分類',
        isActive: false
      },
      {
        id: 3,
        name: '關于',
        isActive: false
      }
    ]
  },

要引用自定義控件.wxml

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

自定義控件.js

  /**
   * 里邊存放的是要從父組件中接收的數(shù)據(jù)
   * 組件的屬性列表
   */
  properties: {
    // //要接受的數(shù)據(jù)的名稱
    // aaa:{
    //   //type 要接收的數(shù)據(jù)的類型
    //   type:String,
    //   //value 默認值
    //   value:""
    // },
    tabs: {
      type: Array,
      value: []
    }
  },

二、子向父傳遞數(shù)據(jù)

1. 子向父傳遞數(shù)據(jù),通過事件的方式傳遞
   1. 在子組件的標簽上加入一個自定義事件
2. 點擊事件觸發(fā)的時候
   1. 觸發(fā)父組件中的自定義事件,同時傳遞數(shù)據(jù)給父控件
   2. this.triggerEvent("父組件自定義事件的名稱",要傳遞的參數(shù))

要引用自定義控件.wxml

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

自定義控件.js

 methods: {
    //綁定點擊事件,需要再methods中綁定
    handleItemTap(e) {
      /**
       1. 綁定點擊事件,需要再methods中綁定
       2. 獲取被點擊的索引
       3. 獲取原數(shù)組
       4. 對數(shù)組循環(huán)
          1. 給每一個循環(huán)性,選中屬性改為false
          2. 給當前的索引項選中屬性給true

       5. 點擊事件觸發(fā)的時候
          觸發(fā)父組件中的自定義事件,同時傳遞數(shù)據(jù)給父控件
          this.triggerEvent("父組件自定義事件的名稱",要傳遞的參數(shù))
       */
      console.log("點擊咯!");
      console.log(e);
      //2. 獲取被點擊的索引
      const { index } = e.currentTarget.dataset;//{index} 是es6中的解構(gòu)賦值
      //3. 獲取data中的數(shù)組
      //解構(gòu) 對復雜類型進行解構(gòu)的時候,復制了一份變量的引用而已
      //最嚴謹?shù)淖龇?重新拷貝一份數(shù)組,再對這個數(shù)組的北方進行處理 : let tabs = JSON.parse(JSON.stringify(this.data.tabs));
      //不要直接修改this.data.數(shù)據(jù)
      // let { tabs } = this.data;//相當于 let tabs = this.data.tabs;
      //4. 對數(shù)組循環(huán)(給每一個循環(huán)性,選中屬性改為false;給當前的索引項選中屬性給true)
      //[].forEach遍歷數(shù)組 遍歷數(shù)組的時候修改了v 也會導致原數(shù)組被修改
      // tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
      // this.setData({
        // tabs
      // })
      //5. 觸發(fā)父組件中的自定義事件
      this.triggerEvent("itemChange",{index});
    }
  }

要引用自定義控件.js

 //自定義事件,用來接收子組件傳遞的數(shù)據(jù)的
  handleItemChange(e) {
    console.log(e);
    //接收傳遞過來的參數(shù)
    const index = e.detail.index;
    let {tabs} = this.data;
    tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
    this.setData({
      tabs
    })
  },

三、tab選項卡中content內(nèi)容的顯示

slot標簽 其實就是一個占位符 插槽 , 等到父組件調(diào)用子組件的時候再傳遞標簽過來,最終這些被傳遞的標簽就會替換slot插槽的位置

自定義控件.wxml

<view class="tabs_content">
        <!-- 
            slot標簽 其實就是一個占位符 插槽
            等到父組件調(diào)用子組件的時候再傳遞標簽過來,最終這些被傳遞的標簽就會替換slot插槽的位置
         -->
        <slot ></slot>
 </view>

要引用自定義控件.wxml

<!-- 
    1. 父組件(頁面)向子組件傳遞數(shù)據(jù),通過標簽屬性的方式來傳遞
        1. 在子組件上進行接收
        2. 把這個數(shù)據(jù)當成是data中的數(shù)據(jù)直接用即可
    2. 子向父傳遞數(shù)據(jù),通過事件的方式傳遞
        1. 在子組件的標簽上加入一個自定義事件
 -->
<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>