二十八.组件和页面通信

╰半夏微凉° 2023-07-09 02:29 15阅读 0赞

# 组件和页面通信 #

### 文章目录 ###

*  组件和页面通信
 *   *  一.向组件传递数据 - properties
     *  二.给自定义组件传递样式
     *  三.组件向外界传递事件-自定义事件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE2NzU0Ng_size_16_color_FFFFFF_t_70]

## 一.向组件传递数据 - properties ##

//自定义组件prop
    <view>{
       {title}}</view>

Component({ 
        properties:{ 
            //这个位置不是放变量的值, 而是放变量的类型
            //title: String 
            title: { 
                type:String,
                value:'我是默认标题',
                //监听函数
                observer:function(newVal, oldVal){ 
                    console.log(newVal, oldVal)
                }
            }
        }
    })

//外部组件
    <prop title="我是标题一"></prop>
    <prop title="我是标题二" />

## 二.给自定义组件传递样式 ##

//自定义组件prop
    <view class="titleclass">{
       {title}}</view>

//外部组件
    <prop title="我是标题一" titleclass="red"></prop>
    <prop title="我是标题二" />
    `

.red{ 
        color:red;
    }

## 三.组件向外界传递事件-自定义事件 ##

//自定义组件 event
    <button size="mini" bind:tap="handleIncrement">
        加1
    </button>

自定义组件中的事件不能直接写到Component中, 要写到methods中

//自定义组件
    Component({ 
        methods: { 
            handleIncrement(){ 
                //第一个参数是要传递出去的事件的名字, 第一个参数是传递的数据
                this.triggerEvent('increment',{ name:'zhangsan'},{ });
            }
        }
    })

//外部组件
    <view>当前计数:{
       {counter}}</view>
    <event bind:increment="handleIncrement"></event>

Page({ 
        data:{ 
            counter:0
        },
        //自定义事件传递的数据在event中的detail中
        handleIncrement(event){ 
            this.setData({ 
                counter: this.data.counter + 1
            })
        }
    })

**例:**  
![在这里插入图片描述][20200227170941303.gif]

<view class="nav">
      <block wx:for="{ {titles}}" wx:key="index">
        <view class="nav1 { {currentItem == index ? 'nav2' : ''}}" bind:tap="handleItemClick" data-index="{ {index}}">
              <text>{
       {item}}</text>
        </view>
      </block>
    </view>

// components/nav/nav.js
    Component({ 
      properties: { 
        titles:{ 
          type: Array,
          value: []
        }
      },
      data: { 
        currentItem:0
      },
      methods: { 
        handleItemClick(event){ 
          //1.取出index 
          const index = event.currentTarget.dataset.index;
          //2.修改currentItem
          this.setData({ 
            currentItem: index
          })
          //3.通知页面内部的点击事件
          this.triggerEvent('itemclick', { index:index, title:this.properties.titles[index]}, { })
        }
      }
    })

.nav{ 
      display:flex;
      height:88rpx;
      line-height: 88rpx;
      background: #ccc;
      color:#fff;
    }
    .nav1{ 
      flex:1;
      text-align: center;
    }
    .nav2{ 
      color:#fac;
    }
    .nav2 text{ 
      padding:20rpx 10rpx;
      border-bottom:#fac 6rpx solid;
    }

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

<nav titles="{ {['流行','新款','精选']}}" bind:itemclick="handleNavClick"/>

Page({ 
      handleNavClick(event){ 
        console.log(event);
      }
    })

{ 
      "usingComponents": { 
        "nav": "/components/nav/nav"
      } 
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE2NzU0Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200227170021751.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE2NzU0Ng==,size_16,color_FFFFFF,t_70
[20200227170941303.gif]: https://img-blog.csdnimg.cn/20200227170941303.gif