点击原创或者分类虽然样式如首页一样变化，但是其父组件的最终isActive的值并未发生改变，但是样式发生改变是因为拿取的是Component>里面的properties中的tabs，你点击下去的时候一样拿取tabs数组，所以不会报错。因此子组件必须通过方法进行修改父组件中的isActive的值，方法如下：

---

components/Tabs/Tabs.js

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

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

// components/Tabs/Tabs.js
Component({properties: {tabs:{type:Array, // 接收数据类型value:[]    // 数据默认值}},data: {},methods: {handleItemTap(e) {const { index } = e.currentTarget.dataset;this.triggerEvent("itemChange",{index});let { tabs } = this.data;tabs.forEach((v, i) => i === index ? v.isActive =true : v.isActive = false);this.setData({tabs})}}
})

---

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

• 在子组件的标签上加入一个 自定义事件 bind+自定义事件名称=“回调函数handleItemChange”

// pages/demo-component/demo-component.wxml
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange"></Tabs>

 工作原理：子组件Tabs.js执行this.triggerEvent("itemChange",{index});这个代码时-----》相当于触发到pages/demo-component/demo-component.wxml页面的自定义标签<Tabs></Tabs>的binditemChange事件，相当于执行了“回调函数handleItemChange”方法

---

子组件components/Tabs/Tabs.js

// components/Tabs/Tabs.js
Component({properties: {tabs:{type:Array,value:[]}},data: {},methods: {handleItemTap(e) {const { index } = e.currentTarget.dataset;this.triggerEvent("itemChange",{index});}}
})

---

父组件pages/demo-component/demo-component.js

// pages/demo-component/demo-component.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) {// console.log(e);  位置:e.detailconst { index } = e.detail; // 拿到索引值let { tabs } = this.data;   // 拿到原数组tabs.forEach((v, i) => i === index ? v.isActive =true : v.isActive = false);                          // 修改原数组this.setData({tabs})                          // 值填充回去}
})

---

页面呈现结构pages/demo-component/demo-component.wxml

// pages/demo-component/demo-component.wxml
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange"></Tabs>

渲染结果