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

全栈程序员站长

发布于 2022-10-03 09:33:40

1.2K00

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

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

渲染结果

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/197136.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年9月5日上，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

暂无评论