组件使用(2-组件传值)

 

 

 

  tabs: [

      {

        id: 0,

        name: "首页",

        isActive: true

      },

      {

        id: 1,

        name: "原创",

        isActive: false

      }

      ,

      {

        id: 2,

        name: "分类",

        isActive: false

      }

      ,

      {

        id: 3,

        name: "关于",

        isActive: false

      }

    ]

 

 

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

 

 

  properties: {

    // 要接收的数据的名称

    // aaa:{

    //   // type  要接收的数据的类型 

    //   type:String,

    //   // value  默认值

    //   value:""

    // }

    tabs:{

      type:Array,

      value:[]

    }

  },

 

 

  

      点击事件触发的时候 

          触发父组件中的自定义事件 同时传递数据给  父组件          */

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

      //  获取索引

      const {index}=e.currentTarget.dataset;

      // 触发父组件中的自定义事件 同时传递数据给  

      this.triggerEvent("itemChange",{index});

 

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

 

  // 自定义事件 用来接收子组件传递的数据的

  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

    })

  }

 

 切换内容 

<view class="tabs">

  <view class="tabs_title">

    <!-- <view class="title_item active">首页</view>

    <view class="title_item">原创</view>

    <view class="title_item">分类</view>

    <view class="title_item">关于</view> -->

    <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 插槽的位置 

     -->

    <slot></slot>

  </view>

</view>

 

<!-- 

  1 父组件(页面) 向子组件 传递数据 通过 标签属性的方式来传递

    1 在子组件上进行接收

    2 把这个数据当成是data中的数据直接用即可

  2 子向父传递数据 通过事件的方式传递

    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>