微信小程序组件之间的传值和事件交互

最新推荐文章于 2025-05-23 09:16:05 发布

鱼子酱酱酱

最新推荐文章于 2025-05-23 09:16:05 发布

阅读量744

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/wuguidian1114/article/details/102570072

本文详细介绍了小程序中父组件向子组件传递数据的方法，以及子组件如何通过触发事件与父组件进行交互。具体包括使用wxml标签属性传递数据，以及自定义事件的监听和触发过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、父组件向子组件传值

页面wxml中

<easyVideo  src="xxxx.mp4"></easyVideo>

在easyVideo中获取src的值

Component({ 
//父元素获取的数据
  properties: {
    src:String
  },
  observers: {},
//数据
  data: {
  },
//生命周期
  lifetimes: {
  },
//方法
  methods: {
  }
})

2、事件交互

1）子组件调用父组件的方法

1、监听

<!-- 当自定义组件触发“myevent”事件时，调用“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" />
<!-- 或者可以写成 -->
<component-tag-name bind:myevent="onMyEvent" />

2、触发

<!-- 在自定义组件中 -->
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>

Component({
  properties: {},
  methods: {
    onTap: function(){
      var myEventDetail = {
        console.log("我来自组件")；
            } // detail对象，提供给事件监听函数
      var myEventOption = {
        bubbles:true,//是否支持冒泡
        composed:true,//是否能够穿越组件
        capturePhase:true//是否捕获
            } // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})