微信小程序-传递数据子传父

合集 - 微信小程序(60)

1.小程序开发概述2023-04-02 2.创建第一个小程序2023-04-02 3.微信小程序app.json文件2023-04-02 4.微信小程序-sitemap.json文件2023-04-02 5.微信小程序app.js文件2023-04-02 6.微信小程序app.wxss文件2023-04-02 7.微信小程序-project.config.json文件2023-04-06 8.微信小程序-页面.json文件2023-04-05 9.微信小程序-页面.js文件2023-04-05 10.微信小程序-组件创建和使用2023-04-06 11.微信小程序-组件-.json文件2023-04-06 12.微信小程序-组件-.js文件2023-04-06 13.微信小程序-WXSS学什么2023-04-07 14.微信小程序-WXSS的书写格式2023-04-07 15.微信小程序-新增RPX响应式单位2023-04-07 16.微信小程序-什么是WXML2023-04-09 17.微信小程序-WXML数据绑定2023-04-09 18.微信小程序-WXML条件渲染2023-04-09 19.微信小程序-WXML的hidden属性2023-04-08 20.微信小程序-WXML列表渲染2023-04-09 21.微信小程序-WXML列表渲染Key2023-04-09 22.微信小程序-WXML包装元素2023-04-09 23.微信小程序-WXS的作用和使用2023-04-14 24.微信小程序-WXS独立文件2023-04-14 25.微信小程序-WXS支持的语法2023-04-14 26.微信小程序-小程序事件绑定2023-04-16 27.微信小程序-小程序事件冒泡和事件捕获2023-04-16 28.微信小程序-事件传递数据2023-04-16 29.微信小程序-data和mark2023-04-20 30.微信小程序-touches和changedTouches2023-04-21 31.微信小程序-案例练习2023-04-21 32.微信小程序-view组件2023-04-22 33.微信小程序-text组件2023-04-22 34.微信小程序-icon组件2023-04-22 35.微信小程序-button组件2023-04-22 36.微信小程序-image组件2023-04-24 37.微信小程序-scrollview2023-05-13 38.微信小程序-image组件-选择相册资源案例2023-04-24 39.微信小程序-自定义组件2023-05-13 40.微信小程序-自定义组件样式隔离2023-05-14 41.微信小程序-自定义组件外部样式2023-05-14 42.微信小程序-传递数据父传子2023-05-14

43.微信小程序-传递数据子传父2023-05-14

44.微信小程序-页面访问组件数据和方法2023-05-14 45.微信小程序-组件通讯练习2023-05-14 46.微信小程序-单个插槽2023-05-15 47.微信小程序-多个插槽-具名插槽2023-05-16 48.微信小程序-behaviors2023-05-17 49.微信小程序-双线程渲染模型2023-05-18 50.微信小程序-页面生命周期2023-05-20 51.微信小程序-页面生命周期方法2023-05-21 52.微信小程序-组件生命周期方法2023-05-21 53.微信小程序-应用程序生命周期方法2023-05-21 54.微信小程序-页面跳转Tabbar2023-05-21 55.微信小程序-页面跳转navigator组件2023-05-21 56.微信小程序-页面跳转wxAPI2023-05-21 57.微信小程序-页面跳转数据传递2023-05-21 58.微信小程序-常用弹窗2023-05-21 59.微信小程序-Storage2023-05-21 60.微信小程序-获取用户位置2023-05-21

在看到此篇文章之前，如果你学习过了 Vue，那么这个内容对你而言就是切菜一样简单，老样子，我们先搭建我们的组件，然后在来看需要介绍的知识点。

创建自定义组件

新建 c-demo:

页面的内容大致就是给一个 view 组件绑定了一个点击事件，点击的时候调用 onTitleTap，在组件当中方法的定义要写在 methods 当中这里是一个注意点，然后通过 mark:xxx 的方式传递了数据。

<!-- 
  c-demo.wxml
 -->
<view>
  <view 
  bindtap="onTitleTap"
  mark:abc="{{title}}"
  >我是 demo 的 title view {{title}}</view>
  <view>我是 demo 的 content view {{content}}</view>
</view>

JS:

在我们的触发方法当中，我们拿到了传递的数据，然后通过 this.triggerEvent("demoTitleClick", curTitle); 主动触发事件的方式传递了一个 title 数据给调用者。

// components/c-demo/c-demo.js
Component({
  /**
   * 组件的初始数据
   */
  data: {
    title: 'BNTang',
    content: 'BNTang content'
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onTitleTap(e) {
      console.log("触发了 c-demo 的 onTitleTap", e);
      const curTitle = e.mark.abc;
      console.log("拿到了当前点击的标题内容：", curTitle);
      this.triggerEvent("demoTitleClick", curTitle);
    }
  }
})

首页的 WXML：

我在首页当中使用了上面新建的 c-demo 组件，绑定了在 c-demo 当中自定义的事件。

<!-- 
  index.wxml
 -->
<myDemo bind:demoTitleClick="sectionTitleClick"/>

首页的 JS：

在 c-demo 的自定义事件当中，传递了一个数据到事件对象中，这里我们可以通过 事件对象.detail 的方式进行获取数据。

// index.js
Page({
  sectionTitleClick(e) {
    console.log("页面监听到了组件触发的事件");
    console.log("在页面中拿到了自定义组件传递过来的数据", e.detail);
  }
})

总结

?> 想从组件中传递数据给页面，只需要在组件中通过 this.triggerEvent("自定义事件名称", "传递的数据"); 这种方式主动触发自定义事件，然后在页面使用这个组件的时候，绑定 triggerEvent 主动触发的自定义事件，就可以在绑定的自定义事件监听方法中，通过事件对象拿到组件传递过来的数据了。