小程序中父子组件间的通信与事件

点此查看微信小程序官方文档

以下示例,可自行体会..

子 - Component 

child.json

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

child.wxml

<view class=‘template-child‘>
  <block wx:for=‘{{dataFromParent}}‘>
    <button data-id=‘{{item.id}}‘ bindtap=‘onTapChild‘>{{item.name}}</button>
  </blcok>
</view>

child.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    dataFromParent: {
      type: Array,
      value: [],
      observer: function (newVal, oldVal, changedPath) {
        // 属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串
        // 通常 newVal 就是新设置的数据, oldVal 是旧数据
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: { },

  /**
   * 组件的方法列表
   */
  methods: {

    onTapChild: function(event){

      // detail对象,提供给事件监听函数
      var myEventDetail = {
        id: event.currentTarget.dataset.id
      }
      // 触发事件的选项
      var myEventOption = {}
      // 使用 triggerEvent 方法触发自定义组件事件,指定事件名、detail对象和事件选项
      this.triggerEvent(‘parentEvent‘, myEventDetail, myEventOption)
    }
  }
})

父 - Page

parent.json

{
  "usingComponents": {
    "child": "../component/child/child"
  }
}

项目目录结构:

parent.wxml

<view class=‘parent-wrap‘>
  <view>这里是父容器, dataFromParent是传递给子组件的数据, parentEvent是自定义组件可触发的事件名</view>
  <child dataFromParent=‘{{contents}}‘ bind:parentEvent=‘onParentEvent‘/>
</view>

可以用 bind:parentEvent  也可以 bindparentEvent

parent.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    contents: [
      {
        id: 1,
        name: ‘点击第 1 个按钮‘
      },
      {
        id: 2,
        name: ‘点击第 2 个按钮‘
      }
    ]
  },

  // 当自定义组件触发 parentEvent 事件时,调用 onParentEvent 方法
  onParentEvent: function (event) {
    // 自定义组件触发事件时提供的detail对象,用来获取子组件传递来的数据
    var id = event.detail.tag;
    console.log(‘子组件传递来的数据 id:‘, id);
    // 其他操作...
  }
})

转: https://www.cnblogs.com/yier0705/p/9679505.html

原文地址:https://www.cnblogs.com/fps2tao/p/11368357.html

时间: 2024-10-08 10:45:09

小程序中父子组件间的通信与事件的相关文章

第四节:Vue表单标签和组件的基本用法,父子组件间的通信

vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="app"&

总结一下微信小程序中父子兄弟组件传递数据

常规的这种写法就是父组件在向子组件传递数据 子组件向父组件传递数据主要通过监听事件 比如like点赞功能触发了一个like事件 父组件通过绑定like事件来监听 对应事件: 原文地址:https://www.cnblogs.com/rmty/p/10914342.html

微信小程序中父子通信

首先父组件 第一步引入 第二步写入 第三步JS 子组件 原文地址:https://www.cnblogs.com/binmengxue/p/12695995.html

小程序中自定义组件

一般单独放在一个文件夹中 类似以线面的这种结构,(单独出来) 和一般新建的page页面不同的是  后缀名是js 文件中的page 变成了component   后缀名为json的文件中多了“component”:"true"使用的时候 需要在指定使用页面的json  文件中做配置[参考如下配置:前面的是组件的名称,后面的是组件的的路径地址] 在页面中使用: 特别注意的是我们使用组件的目的之一是减少代码量,并且使用的组件能够支撑起使用页面的数据,这也就要求组件中的数据是可以变化的 [动态

Vue2父子组件间的通信

父组件通过 props 向下传递数据给子组件,子组件通过 events 向上给父组件发送消息. 父组件: <div> <div style="background:#34495E;color: #fff; padding:20px"> <p style="margin-bottom: 20px">这是父组件</p> <div style="background:#E74C3C;color: #fff;

微信小程序中不同页面间的参数传递

从样式页面WXML向逻辑页面JS传递点击事件的响应函数中传递参数 1 <!--此为样式页面--> 2 <block wx:for="{{postList}}" wx:for-item="item" wx:for-index="idx"> 3 <view catchtap="onPostTap" data-postid="{{item.postId}}"> 4 <te

小程序解决方案 Westore - 组件、纯组件、插件开发

数据流转 先上一张图看清 Westore 怎么解决小程序数据难以管理和维护的问题: 非纯组件的话,可以直接省去 triggerEvent 的过程,直接修改 store.data 并且 update,形成缩减版单向数据流. Github: https://github.com/dntzhang/westore 组件 这里说的组件便是自定义组件,使用原生小程序的开发格式如下: Component({ properties: { }, data: { }, methods: { } }) 使用 Wes

非父子组件间通信

非父子组件之间的通信,可以通过一个空的 Vue 实例作为中央事件总线(事件中心),用他来触发事件和监听事件. 在这里,如果是工作中的新手看了官网的例子直接上手写,会有些发懵.这个作为事件总线空的 Vue 实例我该写哪里去?因为工作中我们的组件都是互相独立的,不可能写一起的,作用域是不同的,所以需要稍作调整 一.在 main.js 中初始化根 Vue 之前,添加一个 data 对象,内写入一个名为 Event 的空 Vue 对象,也就是中央事件总线 new Vue({ el: '#app', da

微信小程序中悬浮窗功能的实现(主要探讨和解决在原生组件上的拖动)

问题场景 所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是cover-view,而是view. 这是简化的代码结构: index.wxml: <view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome"