小程序父子组件传参_微信小程序修改全局变量

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

点击原创或者分类虽然样式如首页一样变化，但是其父组件的最终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.detail
    const { 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>

渲染结果