uni-app入门:自定义组件实现父子组件参数传递

简介: 观察可以发现子组件subCount与subCountAdd方法均被调用;使用this.setDate即可更改子组件属性.

1.属性绑定:父组件传递参数到子组件


   首先交代一下基本的项目信息:主页面为index.wxml,创建test子组件,文件目录:component/test/test,index.json中引用test组件.

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


演示案例:

   父组件中定义num并初始化数据为1,将num传递到子组件test中并展示.

index.js中定义num并初始化数据为1

Page({
  data: {
    num:1
   }
   })


index.html中创建view组件

<view>父组件属性:{{num}}</view>


test.html中接收父组件中数据:

<view>子组件获取到父组件的属性:{{num}}</view>


test.js中定义num属性:

Componet({
  properties:{
    num:Number
  }
})


页面展示效果如下:

11f0217aff4e973db7918bc3f960e79c_1d5d3e27d56644a0a09ee8af2722475c.png


2.事件绑定:子组件传递参数到父组件


   操作步骤:

1.父组件js中定义函数;

2.父组件中通过传递自定义事件形式传递给子组件;

3.子组件js中调用父组件自定义事件;

this.triggerEvent('父组件函数',
      {value: 子组件参数});

3.父组件自定义事件处理子组件传递参数,通过event.detail.value获取


   示例说明:

index.wxml中添加test组件,test组件创建初始值subCount和加一按钮,点击按钮实现subCount加一.父组件中创建初始值parCount,实现test子组件中点击按钮之后不仅能实现subCout加一,也能将subCount赋值给parCount.即点击按钮实现subCount与parCount同步变化.

子组件test中初始化subCount以及创建按钮实现点击加一操作:

test.wxml:

<view>子组件data属性subCount值:{{subCount}}</view>
<button type="primary" bindtap="subCountAdd">子组件中点击数据值加一</button>


test.js中:

Component({
data:{
    subCount:1
  },
 methods:{
 subCountAdd:function(){
      this.setData({
        subCount: this.data.subCount+1
      })
    }}
})


父组件index.js中初始化parCount并创建传递参数函数,通过参数event.detail.value来获取传递参数:

Page({
  data: {
    parCount:2
   },
   // 自定义父组件函数
   transferFucntion(event){
    console.log("父组件中传参事件触发!"),
    console.log(event.detail)
  }
  }
)


父组件index.wxml中在子组件test中传递自定义函数:

<test bind:transferFucntion="transferFucntion"></test>
<view>父组件data属性parCount值:{{parCount}}</view>


子组件test.js中的加一方法中添加父组件的自定义事件,传递参数为


Component({
data:{
    subCount:1
  },
 methods:{
 subCountAdd:function(){
      this.setData({
        subCount: this.data.subCount+1
      }),
        // 注册父组件方法,this.triggerEvent('父组件函数名',参数(非必填))
      this.triggerEvent('transferFucntion',
      {value: this.data.subCount});
    }}
})


父组件index.js中通过参数event.detail.value来获取传递参数并赋值给parCount:

Page({
  data: {
    parCount:2
   },
   // 自定义父组件函数
   transferFucntion(event){
    console.log("父组件中传参事件触发!"),
    console.log(event.detail),
    this.setData({
      parCount:event.detail.value
    })
  }
  }
)


最终实现效果,点击按钮,子组件中subCount与parCount同步变化.

9d60ca614ee3008bbf8f5ce40592d227_34026f5f92c944ca978d12ed457e9b79.png

4.获取组件对象实例:父组件获取子组件实例对象进行参数传递


   父组件中使用this.selectComponent('子组件id选择器或是class选择器)进行获取子组件实例,进而传递参数到子组件.

演示示例:

   父组件index.wxml中创建点击事件获取子组件test中subCount值以及调用子组件的subCountAdd方法(subCount与subCountAdd均在上个案例中定义过)

   index.wxml中创建点击事件selectSubCompnet并给子组件test设置id属性和class属性:

<test id="subCompnetId" class="subCompnetClass"></test>
<button type="primary" bindtap="selectSubCompnet">点击获取子组件</button>


index.js中点击事件获取子组件实例并获取子组件属性和方法并调用:

Page({
  // 父组件选择子组件
  selectSubCompnet(){
    const subCompnet=this.selectComponent('#subCompnetId');
    console.log("subCount值:"+subCompnet.data.subCount);
    subCompnet.subCountAdd();
    console.log("调用子组件subCountAdd方法之后subCount值:"+subCompnet.data.subCount);
  }
})


点击按钮并观察控制台输出内容:

1ecc4fd779d485ac1acae5662759e986_340832630a3c480cbe7f3b8b59019173.png

观察可以发现子组件subCount与subCountAdd方法均被调用;使用this.setDate即可更改子组件属性.


相关文章
|
4月前
|
Android开发 数据安全/隐私保护 开发者
Android自定义view之模仿登录界面文本输入框(华为云APP)
本文介绍了一款自定义输入框的实现,包含静态效果、hint值浮动动画及功能扩展。通过组合多个控件完成界面布局,使用TranslateAnimation与AlphaAnimation实现hint文字上下浮动效果,支持密码加密解密显示、去除键盘回车空格输入、光标定位等功能。代码基于Android平台,提供完整源码与attrs配置,方便复用与定制。希望对开发者有所帮助。
|
5月前
|
人工智能 JSON 小程序
【一步步开发AI运动APP】七、自定义姿态动作识别检测——之规则配置检测
本文介绍了如何通过【一步步开发AI运动APP】系列博文,利用自定义姿态识别检测技术开发高性能的AI运动应用。核心内容包括:1) 自定义姿态识别检测,满足人像入镜、动作开始/停止等需求;2) Pose-Calc引擎详解,支持角度匹配、逻辑运算等多种人体分析规则;3) 姿态检测规则编写与执行方法;4) 完整示例展示左右手平举姿态检测。通过这些技术,开发者可轻松实现定制化运动分析功能。
|
7月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
391 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
3月前
《仿盒马》app开发技术分享-- 积分页组件新增(64)
上一节我们创建了积分页,给页面添加了标题栏和积分展示的组件。这一节我们继续丰富积分页的内容,添加引导栏,积分明细展示等区域
81 0
|
3月前
《仿盒马》app开发技术分享-- 自定义标题栏&商品详情初探(9)
上一节我们实现了顶部toolbar的地址选择,会员码展示,首页的静态页面就先告一段落,这节我们来实现商品列表item的点击传值、自定义标题栏。
76 0
|
4月前
|
人工智能 小程序 API
【一步步开发AI运动APP】九、自定义姿态动作识别检测——之关键点追踪
本文介绍了【一步步开发AI运动APP】系列中的关键点追踪技术。此前分享的系列博文助力开发者打造了多种AI健身场景的小程序,而新系列将聚焦性能更优的AI运动APP开发。文章重点讲解了“关键点位变化追踪”能力,适用于动态运动(如跳跃)分析,弥补了静态姿态检测的不足。通过`pose-calc`插件,开发者可设置关键点(如鼻子)、追踪方向(X或Y轴)及变化幅度。示例代码展示了如何在`uni-app`框架中使用`createPointTracker`实现关键点追踪,并结合人体识别结果完成动态分析。具体实现可参考文档与Demo示例。
|
5月前
|
人工智能 小程序 API
【一步步开发AI运动APP】四、使用相机组件抽帧
本文介绍了如何使用`ai-camera`组件开发AI运动APP,助力开发者深耕AI运动领域。`ai-camera`是专为AI运动场景设计的相机组件,支持多平台,提供更强的抽帧处理能力和API。文章详细讲解了获取相机上下文、执行抽帧操作以及将帧保存到相册的功能实现,并附有代码示例。无论是AI运动APP还是其他场景,该组件都能满足预览、拍照、抽帧等需求。下篇将聚焦人体识别检测,敬请期待!
|
5月前
|
人工智能 小程序 API
【一步步开发AI运动APP】八、自定义姿态动作识别检测——之姿态相似度比较
本文介绍了如何通过姿态相似度比较技术简化AI运动应用开发。相比手动配置规则,插件`pose-calc`提供的姿态相似度比较器可快速评估两组人体关键点的整体与局部相似度,降低开发者工作量。文章还展示了在`uni-app`框架下调用姿态比较器的示例代码,并提供了桌面辅助工具以帮助提取标准动作样本,助力开发者打造性能更优、体验更好的AI运动APP。
|
8月前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
239 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
7月前
|
开发框架 缓存 搜索推荐
PiliPala:开源项目真香,B站用户狂喜!这个开源APP竟能自定义主题+去广告?PiliPala隐藏功能大揭秘
嗨,大家好,我是小华同学。PiliPala 是一个基于 Flutter 开发的 BiliBili 第三方客户端,提供流畅、个性化的使用体验。核心功能包括视频浏览与推荐、用户互动、丰富的播放设置、多维度搜索和个性化主题等。相比官方客户端,PiliPala 功能更丰富、性能更优、界面更美观。
338 14