【微信小程序---自定义组件父组件向子组件传递参数】

本文介绍了如何在微信小程序中,通过父组件(页面demo.wxml)将数据`aaa`传递给子组件(components>Tabs>Tabs.js)。在父组件上添加相应代码,然后在子组件的properties中接收,并在子组件的WXML文件中使用传递的数据进行显示。
摘要由CSDN通过智能技术生成

1.父组件(页面demo.wxml) 向 子组件(components>Tabs>Tabs.js接收)

  • 在父组件上添加
    demo.wxml
<Tabs aaa="123"></Tabs>
  • 子组件接收

components/Taps/Tabs.js 

 是接收在Componet>properties:{这里面}

// components/Tabs/Tabs.js
Component({
  properties: {
    // 这里面是用来接收父向子传递的数据
    aaa:{
      // type 要接收的类型
      type:String,
      // value 默认值 没传的就是默认值 传的话传的就是默认值
      value:""
    }

  },
  /* 组件的初始数据*/
  data: {
    tabs: [
      {
        id: 0,
        name: "首页",
        isActive: true
      },
      {
        id: 1,
        name: "原创",
        isActive: false
      },
      {
        id: 2,
        name: "分类",
        isActive: false
      },
      {
        id: 3,
        name: "关于",
  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
组件接收组件传递的方法的一种方式是通过使用triggerEvent方法来触发一个自定义事件,并将组件传递的方法作为参数传递给子组件。 具体实现方法如下: 在子组件的js文件中,通过triggerEvent方法触发一个自定义事件,并将组件传递的方法作为参数传递给子组件。 子.js: ``` // 子组件的js文件 Component({ methods: { // 子组件触发调用组件的方法,并将参数传递给组件 triggerParentMethod() { // 组件传递的方法作为参数传递给子组件 this.triggerEvent('parentMethod', {param: 'hello'}, {}) } } }) ``` 在组件的wxml文件中绑定子组件触发的自定义事件,并在组件的js文件中定义接收该事件的方法。 .wxml: ``` <!-- 组件的wxml文件 --> <child-component bind:parentMethod="handleParentMethod"></child-component> ``` .js: ``` // 组件的js文件 Page({ // 接收组件传递的方法 handleParentMethod(e) { // 子组件传递的参数可以通过e.detail获取 console.log(e.detail) // {param: 'hello'} } }) ``` 通过以上方法,子组件可以接收并触发组件传递的方法,并将参数传递给组件。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [微信小程序组件传值给组件,调用组件函数](https://blog.csdn.net/weixin_43452154/article/details/126770872)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [微信小程序组件向子组件传递数据](https://blog.csdn.net/weixin_48719720/article/details/124005537)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

studyer网

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值