微信小程序-自定义组件-父向子传递数据

微信小程序-自定义组件-父向子传递数据

新建文件Tabs

Tabs.js

// components/Tabs/Tabs.js
Component({
 /**
   * 里面存放的是 要从父组件中接收的数据
   */
  properties: {
    // 要接收的数据的名称
    aaa:{
      // type 要接收的数据的类型
      type:String,
      // value 默认值
      value:""
    },
    tabs:{
      type:Array,
      value:[]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
  },

  /*
    1 页面 .js 文件中 存放事件回调函数的时候 存放在data同层级下！！！
    2 组件 .js 文件中 存放事件回调函数的时候 必须要存放在 methods中 ！！！
  */
  methods: {
    handeItemTap(e){
      /*
        1 绑定点击事件 需要在methods 中绑定
        2 获取被点击的索引
        3 获取原数组
        4 对数组循环
          1 给每一个循环项 选中属性 改为false
          2 给当前的索引的 项 添加激活选中效果就可以了！！！
      */
     // 2 获取索引
     const {index} = e.currentTarget.dataset;
     // 3 获取data中的数组
     // 解构 对 复杂类型进行解构的时候 复制了一份 变量的引用而已
     let {tabs} = this.data; // let tabs = this.data.tabs;
     // 最严谨的做法 重新拷贝一份 数组， 在对这个数组的备份进行处理
     // let tabs = JSON.parse(JSON.stringify(this.data.tabs));
     // 不要直接修改 this.data.数据
     // 4 循环数组
     // [].forEach 遍历数组 遍历数组的时候 修改了 v ，也会导致原数组被修改
     tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);

     // 数组重新复制
     this.setData({
       tabs
     })
    }
  }
})

Tabs.json

{
  "component": true,
  "usingComponents": {}
}

Tabs.weml

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

<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="handeItemTap"
    data-index="{{index}}"
    >
      {{item.name}}
    </view>
  </view>
  <view class="tabs_content">内容</view>

</view>

Tabs.wxss

.tabs{}
.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_content{}

demo.json

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

demo.wxml

<!-- 
  1 父组件（页面） 向子组件 传递数据 通过 标签属性的方式来传递
    1 在子组件上进行接收
    2 把这个数据当成是data中的数据直接用即可
 -->
<Tabs aaa="123" tabs="{{tabs}}"> </Tabs>

示例