微信小程序中自定义组件数据监听案例

实现效果

 

 

app.json

{
  "pages": [
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#13A7A0",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "/images/tabs/home.png",
        "selectedIconPath": "/images/tabs/home-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "/images/tabs/message.png",
        "selectedIconPath": "/images/tabs/message-active.png"
      },
      {
        "pagePath": "pages/contact/contact",
        "text": "联系我们",
        "iconPath": "/images/tabs/contact.png",
        "selectedIconPath": "/images/tabs/contact-active.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "usingComponents":{
    "my-test1":"/components/test/test",
    "my-test3":"/components/test3/test3"
  }
}

test3.js

// components/test3/test3.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {

    },

    /**
     * 组件的初始数据
     */
    data: {
        rgb:{
            r:0,
            g:0,
            b:0
        },
        fullColor:'0,0,0'
    },

    /**
     * 组件的方法列表
     */
    methods: {
        changeR(){
            this.setData({
                'rgb.r':this.data.rgb.r+5>255?255:this.data.rgb.r+5
            })
        },
        changeG(){
            this.setData({
                'rgb.g':this.data.rgb.g+5>255?255:this.data.rgb.g+5
            })
        },
        changeB(){
            this.setData({
                'rgb.b':this.data.rgb.b+5>255?255:this.data.rgb.b+5
            })
        }
    },

    //监听器
    observers:{
        'rgb.r,rgb.g,rgb.b':function(r,g,b){
        this.setData({  
            fullColor:`${r},${g},${b}`
        })
        }
    }
})

test3.wxml

<view style="background-color: rgb({{fullColor}});" class="colorBox">颜色值：{{fullColor}}</view>
<button size="mini" type="default" bindtap="changeR">R</button>
<button size="mini" type="primary" bindtap="changeG">G</button>
<button size="mini" type="warn" bindtap="changeB">B</button>
<view>{{rgb.r}},{{rgb.g}}，{{rgb.b}}</view>

text3.wxss

/* components/test3/test3.wxss */
.colorBox{
    line-height: 200rpx;
    font-size: 24rpx;
    color: white;
    text-shadow: 0rpx 0rpx 2rpx black;
    text-align: center;
}