二十八.组件和页面通信

组件和页面通信

文章目录

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

在这里插入图片描述

一.向组件传递数据 - 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>
Component({ 
    properties:{ 
        //这个位置不是放变量的值, 而是放变量的类型
        //title: String 
        title: { 
            type:String,
            value:'我是默认标题',
            //监听函数
            observer:function(newVal, oldVal){ 
                console.log(newVal, oldVal)
            }
        }
    },
    externalClasses:['titleclass']
})
//外部组件
<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
        })
    }
})

例:
在这里插入图片描述

<!-- 自定义事件的练习:自定义组件nav -->
<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"
  } 
}