微信小程序---组件使用及组件间传值

我不是女神ヾ 2022-11-05 12:54 210阅读 0赞

*  **创建子组件：Tabs**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70 2][]

Tabs.wxml

Tabs.wxss

.menu{
      display: flex;
      height: 60px;
      align-items: center;
      justify-content: space-around;
      color: black!important;
      box-shadow: 1px 1px 1px #0087AC;
    }
    .active{
      font-weight: 600;
      color: #0087AC;
    }

Tabs.js

Component({
      properties: {
        listMenu: {
          type: Array, // 参数类型
          value: [] // 参数默认值
        }
      },
      data: {},
      methods: {
        handlerMenuTap(e){
          // 子组件通过自定义事件向父组件传参
          this.triggerEvent('menuClick', {"menuName" : e.currentTarget.dataset.menuname})
        }
      }
    })

*  **父组件中引入并使用子组件**

index.wxml

<Tabs listMenu="{
       { listMenu }}" bindmenuClick="menuClick" />

index.json(页面配置文件)

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

index.js

Page({
      data: {
        listMenu : [
          {
            name : '总部',
            isActive : true
          },
          {
            name : '地球',
            isActive : false
          },
          {
            name : '火星',
            isActive : false
          },
          {
            name : '宇宙',
            isActive : false
          }
        ]
      },
      menuClick(e){
        var menuName = e.detail.menuName // 获取子组件传过来的 menuName 参数
        var menus = this.data.listMenu
        menus.forEach(item => {
          item.name == menuName ? item.isActive = true : item.isActive = false
        })
        this.setData({
          listMenu: menus
        })
      }
    })

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210306172743248.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210306172851497.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70 2]: /images/20221023/3daf82c37c4041c9921320541973d0cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70 3]: /images/20221023/1a5beffc69614acf9c6809a752fe0321.png