#微信小程序# 父组件给子组件动态传值

问题描述
component为一个圆环,page引入这个component,根据后端传值决定圆环显示比例,所以需要page动态给component传值。

解决方法
1.page里引用component的地方 .wxml

      <view class="a_circle_item">
        <circle2 r="70" p="{{protein}}"/>
        <view>蛋白质</view>
      </view>

2.component.js文件里需要使用 observer

  properties: {
    number:Number,
    r:{//半径
      type: String,
      value: '70'   
    },
    p:{//圆环比例
      type: String,
      value: '70',
      observer: 'update',   
    },
  },

	methods: {
		//此处是p动态传值发生时触发的事件
	    update(newValue) {
	    	//原先attached即初始化时运行的代码
      		let rpx = Number(this.data.r/2)
      		this.drawCircleBg(rpx, this.data.w);//绘制 背景圆环
      		this.drawCircle(rpx, this.data.w, this.data.p);
    	},
	}

理论学习
微信开放文档-小程序-自定义组件-数据监听器


版权声明:本文为weixin_43811390原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。