微信小程序自定义组件在获取到父组件传的值以后如何修改自定义内部数据??

父组件index.wxml stalls是个数组 count的属性是字符串

<view class='stalls' wx:for="{{stalls}}" wx:key=''>
    <stars count="{{item.count}}" />
  </view>
</view>

自定义组件
stars.wxml

   <view class='stall'>
  <view>{{count}}</view>
    <block wx:for="{{solid}}" wx:key="">  
      <image src='../../images/star-solid.png'></image>  
    </block>  
    <block wx:for="{{half}}" wx:key="">  
      <image src='../../images/star-half.png'></image>  
    </block>
    <block wx:for="{{hollow}}" wx:key="">  
      <image src='../../images/star-hollow.png'></image>  
    </block>  
  </view>

stars.js

 Component({
  properties: {
    count:String
  },
  data: {
    // 这里是一些组件内部数据
    solid: ' ', 
    half: ' ', 
    hollow: ' ', 
  },
    onLoad: function () {
      this.setData({ 
        solid: parseInt(this.properties.count),
        half: Math.ceil(5 - this.aproperties.count) - (5 - self.properties.count),
        hollow: parseInt(5 - this.properties.count)
      })
    },
})

自定义组件内部的data里的数据没有变化

4个回答

第一,组件没有onLoad事件,自己好好看api,改为ready事件
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html

第二,starts.js代码有问题,properties写成了aproperties,self变量没有定义;乱用


Component({
  properties: {
    count: String
  },
  data: {
    // 这里是一些组件内部数据
    solid: '',
    half: '',
    hollow: '',
  },
  ready: function () {
    this.setData({
      solid: parseInt(this.properties.count),
      half: Math.ceil(5 - this.properties.count) - (5 - this.properties.count),
      hollow: parseInt(5 - this.properties.count)
    })
    }
});
Chen_w_h
Chen_w_h 如果父组件的传值变化了,怎么监听?
4 个月之前 回复
weixin_41087211
weixin_41087211 要是父组件通过接口传过来的数据查询再传过来的数据是取不到的这样
8 个月之前 回复
qq_31205277
qq_31205277 非常感谢您 我还是前端小白 在自己琢磨着学习 像properties和this写错这是我太粗心了 不过还是学到了很多东西
大约一年之前 回复

父组件的值没有传给子组件,你在父组件里面设值就行

count="{{item.count}}" 已经传给子组件count的值 我的目的是想使用传过来的count值来设置改变data里{soild,half,hllow}的值

我的意见是值没有传到子组件,如果传给了,自然就改变了,在父组件里直接给子组件赋值试试

qq_37326201
qq_37326201 从父组件没有传到子组件,在试试
大约一年之前 回复
weixin_41386123
coder_xiaozhao 换成这种传值方法
大约一年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
微信小程序自定义组件
组件 component-name配置json文件 component-name.json { &amp;quot;component&amp;quot;: true, &amp;quot;usingComponents&amp;quot;: {} } component-name.js Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ ...
微信小程序——自定义组件
6.2.3 自定义组件 自定义组件是开发者可以自行扩充的组件。开发者可以将常用的节点树结构提取成自定义组件,实现代码复用。 1. ShadowTree的概念 我们以下面的代码为例来阐述Shadow Tree的概念。 代码清单6-2 页面节点树(Composed Tree) &amp;lt;view&amp;gt; &amp;lt;input-with-label&amp;gt; &amp;lt;label&amp;g...
微信小程序:自定义组件
一开始看官网,看的一脸茫然,后来看了下别人的,才终于知道微信小程序的组件怎么开发了效果图blue.jpgred.jpg新建一个component文件夹,在文件夹下创建rowBox文件夹,再分别创建wxml,wxss,json,js四个文件。目录rowBoxwxss.bg_red{ background: #ff5d68; } .bg_blue{ background: #cbd1f5; }...
微信小程序的自定义组件
微信小程序可以自定义组件,下面我将以input举例进行说明。首先我们要建一个存放模板的文件夹(component),在它下面建一个组件文件夹(weui-input)用来写组件模板代码如下:&amp;lt;!--component/weui-input.wxml--&amp;gt; &amp;lt;view class='weui-cell weui-cell-input'&amp;gt; &amp;lt;view class='we...
微信小程序之自定义组件
简单记录如何实现自定义组件。一、在文件目录创建一个文件夹,如goodList二、goodList.json 中做自定义组件声明等(json文件中不应出现注释){ &quot;component&quot;: true }三、在goodList.wxml内容如下:&amp;lt;view class=&quot;shop-section&quot;&amp;gt; &amp;lt;p&amp;gt;{{tittle}}&amp;lt;/p&amp;gt; &amp;lt;...
微信小程序-微信小程序自定义组件
微信小程序 - 自定义组件 预览 用微信web开发者工具打开src目录(请注意,是src目录,不是整个项目) 使用 组件的wxml结构请看src/components/下的组件 样式文件可直接引用src/components/wux.wxss Components ActionSheet - 上拉菜单 Backdrop - 背景幕 Barcode - 条形码 Button - 浮动按钮 Calendar - 日历 CountDown - 倒计时 CountUp - 计数器 Dialog - 对话框 Gallery - 画廊 Loading - 指示器 Notification - 通知 Picker - 选择器 Prompt - 提示信息 Qrcode - 二维码 Rater - 评分组件 Refresher - 下拉刷新 Seats - 座位图 Toast - 提示框 Toptips - 顶部提示 Xnumber - 数字输入框 项目截图 贡献 有任何意见或建议都欢迎提 issue License MIT
【微信小程序】自定义组件
Component构造器1 .在项目下新建一个components目录用来存放开发中所有自定义组件。 在components目录下新建一个draw文件夹存放自定义组件。 新建Component 会生成4个文件。 在components目录下.json 文件.wxml文件.js初始化数据.wxss  一个意思2 导入自定义组件在需要的页面中  在.json  文件中导入在 .wxml 中使用事件: ...
微信小程序---自定义组件
1 新建一个 mnum.wxml 1.1 编写结构 &lt;view class="pressBtn" id="view"&gt; {{magicNumber}} &lt;text id="text" style="color:'#ccc';" catch:tap="onTap"&gt;点按我可以打印信息 ...
求助各位大侠:自定义组件中的组件无法获取到值
自定义组件是GridView中使用了TextBox组件,但在刷新前把数据保存时无法获取到TextBox中的值.是否自定义组件无法实现此功能,如果可以又如何实现,谢谢大侠们!
微信小程序自定义组件 组件通讯 (2)
这篇小编主要讲组件通讯 (1)父组件向子组件传值: &lt;header title='{{title}}' bind:fn='fn' id='header'&gt;&lt;/header&gt; 通过title='{{title}}'传向子组件向子组件传递参数 子组件接收参数: Component({ properties: { title: { // 属...
微信小程序自定义组件之Picker组件
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 需求: 通过JS条件判断,满足条件就弹出Picker给用户选择一个数组里面的数据。 有些朋友可能会有疑问: 1.为什么要使用自定义的Picker组件,不是有原生的组件吗? 回答:因为小程序的Picker组件是需要用户手动触发的。并不满足上述需求。 2.这个需求我知道在小程序文档里面有一个API可以...
微信小程序自定义组件 组件通讯 (1)
​​​​​​平时我们接触过vue的组件化开发 组件调用 组件通讯 微信小程序的跟vue意义上是相同的 接下来我们开始我们创建一个公共组件: 1.首先创先组件目录 2.component目录中创建公共组件 3.注册组件 header.json文件里我们要配置{"component": true}每一个公共组件都要在component中注册 { "componen...
微信小程序自定义组件——添加图片组件
文章目录一、预期功能二、组件的设计方案三、现在上代码(根据引用关系进行展示)3.1 image-view组件3.2 row-view组件3.3 add-img组件 先上图 一、预期功能 实现图片的添加 实现图片的删除 实现图片的预览 二、组件的设计方案 2.1 添加图片方案有几种添加方式 添加的同时上传,这样最后提交表单的时候便捷,但是会浪费一些多余的流量和服务器资源 添加只保存本地url...
微信小程序 --- 自定义组件之滑动验证组件
先看效果图: 目录结构: 点击这里,浏览器打开弹窗,点击打开微信这开发工具,导入微信开发者工具中,就可以在微信开发者工具观看所有代码,无需复制黏贴 调用组件的index文件 //index.js const app = getApp() Page({ data: { }, myEventListener: function(e) { //获取到...
微信小程序-自定义组件修改样式
1、小程序的 外部样式属性:externalClasses 可以是 1个或多个 (string or array)2 在组件标签里写上class3、在使用组件的页面里的标签里 写上属性要对应的class类名4、在使用的页面的wxss文件里中写上样式 刷新大功告成注意点:https://developers.weixin.qq.com/miniprogram/dev/framework/cust...
获取微信小程序自定义组件的值
获取自定义组件的值 前一段时间和同学写了一个微信小程序“番茄自制区”(已发布,微信小程序搜索“番茄自制区”),其中用到了自定义的一个组件item,我用列表渲染对组件的属性赋值。 &lt;item wx:for="{{ todos }}" wx:key="id" binditemremove="onItemRemove" bindTomato="st_tomato" ...
微信小程序之子>父组件传值
基础:基于微信开发者工具(小程序开发) 父组件.wxml页面:将onMyEvent事件绑定到子组件(wx:if通过传过来的值来控制子组件是否显示) &amp;lt;hqw-search wx:if=&quot;{{!showsaerch}}&quot; bind:myevent=&quot;onMyEvent&quot;&amp;gt;&amp;lt;/hqw-search&amp;gt; 子组件.wxml页面:创建某事件(如将tap事件绑定到(view元素...
小程序组件传值 ,微信小程序父子组件传值通信 ,小程序自定义组件(组件传值)
实现一个加法计数器(点击加号数字+1) 1.项目结构 2、页面效果(点击加号 数字加一,max变成99 ),max值为子组件传递过来。 3.组件com代码 wxss: .quantityViewStyle { display:flex; border:0rpx solid #DADADA; border-radius:6rpx; width: 220r...
微信小程序自定义组件、模板
基于对WEUI样式的添加,主要添加了一些常用的组件,以及自定义组件和模板,实现组件化开发。我会及时更新文件。
微信小程序Toast自定义组件
微信小程序Toast自定义组件
微信小程序自定义组件示例
声明:此文借鉴两位前辈的博文 https://www.jianshu.com/p/8a2a730d9e60 http://www.jb51.net/article/117295.htm 感谢这两位前辈的贡献!!! 实现功能:把密码输入封装成一个自定义组件,可以多处调用此组件 component部分:pwdalert.wxml<view wx:if="{{pwd_flag}}" class=
微信小程序音乐播放自定义组件
微信小程序音乐播放以及slider滑块控制自定义组件。解压缩放入项目即可使用,可以播放任意数量音频。拥有可拖动的滑块控制组件。时间显示。音频图片播放中动画。完善的播放暂停选择时间等等功能。
微信小程序自定义组件Dialog
官网对自定义组件新手来说可能会比较比较笼统,写出来也可能会页面很乱 所以在这里我细致化的写出来,读一遍就可以 微信小程序自定义组件 1:创建自定义组件目录(这里我创建的自定义组件目录为myCompontent) 2:自定义组件和页面相似同样拥有 .js,.json,.wxml,.wxss四个文件,当然为了方便使用   这里使用的四个文件名称使用的是以myCompontent命名
微信小程序自定义组件(二)
微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写。无奈,这是要自己建编辑器的节奏啊。没有一个能靠的注 为何存在组件 组件间的关系 使用relations实现组件的关系,即父子关系。 定义和使用组件间的关系 有时需要使用如下的组件间的关系 &amp;lt;custom-ul&amp;gt; &amp;lt;custom-li&amp;gt; item1 &amp;...
微信小程序:自定义组件的数据传递
一、前言 如果小程序中有可复用的UI且具有一定的功能性,就可以使用自定义组件将其封装起来。下面介绍一个简单的组件和一个复杂的组件。 二、简单的组件(计数器) 1. 组件功能介绍 这个组件常见于外卖软件中,用于记录想要购买的商品的数量。初始化的时候只有一个加号,点击加号以后出现数字和减号,并最后将数字传到组件外供外部使用。 2. 创建组件...
微信小程序之圆形进度条(自定义组件)
前言 昨天在微信小程序实现了圆形进度条,今天想把这个圆形进度条做成一个组件,方便以后直接拿来用。根据官方文档自定义组件一步一步来 创建自定义组件 第一步创建项目结构 打开微信开发者工具创建一个项目,新建目录 components 与 pages 目录同级在components中新建一个目录circle在circle中新建 Componen...
微信小程序--自定义组件之搜索框
组件:搜索框 功能:根据输入框输入值进行模糊查询并在下方滑动框中显示 功能图:     component.wxml &amp;lt;!--自定义组件--&amp;gt; &amp;lt;!---搜索框 start--&amp;gt; &amp;lt;view class='main'&amp;gt; &amp;lt;view class='section_search'&amp;gt; &amp;lt;view class='searc...
微信小程序自定义组件(Toast)
微信官方的wx.showToast这个API用起来限制性太强,在正式项目上根本用不上,但是又没有其他组件或API可以替代,所以就自己通过网上大神的方法自己写了一个自定义的toast组件。 一,自定义组件 1.组件模版和样式 类似于页面,自定义组件拥有自己的 wxml 模版和 wxss 样式。组件模版的写法与页面模板相同。组件模版与组件数据结合后生成的节点树,将被插入到组件的引用位置上。在组件...
微信小程序--15自定义组件
关于自定义组件有两个知识点需要说一下: 1.子组件向父组件传参数 在子组件内部,这样触发事件,传递参数 在父组件内部这样接收参数 2. 父组件向子组件传参数 在父组件这里定义一个now-in 在子组件这里引入 这样的话,nowIn就相当于data里面的值,可以随便用了 -----------------------------------------------...
微信小程序 自定义组件之《转盘》
微信小程序支持简洁的组件化编程 开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。 这篇博文主要就是分享个自己实际项目中用到的 转盘自定义组件 项目源码地址:https://github.com/hujinchen/zhuanpan2.0    关于如何开始创建自定义组件...
微信小程序自定义组件 单选
效果图: 调用部分(例如在index页面) index.wxml &lt;view catchtap="showSinger"&gt; 单选按钮 &lt;singer id="singer" bind:singerCancel="_singerCancel" bind:singerConfirm="_singerConfirm" singerContent='{{singerC...
微信小程序自定义组件--对话框
自定义组件小程序基础库版本1.6.3开始,小程序支持简洁的组件化编程。 开发过程中,要重复使用到某些页面功能或是组件,一般我们思路是把对应的页面功能或是组件抽象成自定义组件,以便不同页面中重复使用。达到复杂界面拆分多个模块,有助有后期维护和代码的可读性。创建组件自定义组件有四个文件:.json、.wxml、.wxss、.js组成,类似于创建page界面。创建自定义组件在微信开发工具中右击选择Com
微信小程序自定义组件简单实现
本文将教你如何实现一个自定义的toast提示框,实现后的基本效果图如下:小程序中一个自定义组件由 json wxml wxss js 4个文件组成的。下面我们一步一步地来创建文件及完成其中的配置:step1:创建自定义组件首先创建一个components文件夹,用于放置所有自定义的组件,创建之后的目录结构为其中的toastedit是我们本次要实现的toast提示框组件。step2:基本配置toas...
微信小程序自定义组件的使用
开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。 微信小程序项目越写越大,页面也越来越多,所以将相同作用的模块写成组件是非常必要也方便开发维护的事。 比如,一个弹出框写起来很简单,但是每个页面都需要用一个弹出框,如果每个页面都写一个弹出框的话,这就很麻烦,而且没有意义,...
微信小程序_自定义组件_初体验
自定义组件是微信小程序中重要的组成部分,是实现模块化开发的重要手段 个人认为,自定义组件是区分菜鸟与高手的分水岭 第一篇先介绍小程序自定义组件的基本使用 自定义组件的使用可以分为如下几个步骤 创建组件 编写组件 引用组件 使用组件 下面以一个星级展示的小案例,说明上面四个步骤 创建组件 组件的引文名称为 component,我们的小程序可能会定义以及使用很多组件,所以建议将...
相关热词 c++和c#哪个就业率高 c# 批量动态创建控件 c# 模块和程序集的区别 c# gmap 截图 c# 验证码图片生成类 c# 再次尝试 连接失败 c#开发编写规范 c# 压缩图片好麻烦 c#计算数组中的平均值 c#获取路由参数