美文网首页
微信小程序父子组件事件及参数传递

微信小程序父子组件事件及参数传递

作者: 九千_ | 来源:发表于2020-09-15 11:50 被阅读0次

官方文档
子组件:
json:
{
"component": true, // 会自动生成
}
wxml:

<button bindtap="onTapChild">点击这个按钮将触发“myevent”事{{innerText}}</button>

js:

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

  /**
   * 组件的初始数据
   */
  data: { },
  /**
   * 组件的方法列表
   */
  methods: {
componentInnerFunction(){},
    onTapChild: function(event){

      // detail对象,提供给事件监听函数
      var myEventDetail = {
        id: event.currentTarget.dataset.id
      } 
      // 触发事件的选项
      var myEventOption = {} 
      // 使用 triggerEvent 方法触发自定义组件事件,指定事名、
//detail对象和事件选项
//子传父事件
      this.triggerEvent('parentEvent', myEventDetail, myEventOption)
   this.triggerEvent("icre", { "index": 323 }, {})
// triggerEvent 关键字用于将事件传递给页面
// icer (可自定义) 页面通过 bind:icre 获取组件事件
// { "index": 323 } 为组件事件携带的数据
 }
  }
})

父组件:

//.wxml:
<comp id="myComponent" bind:icre="click" someProperty="{{someData}}"></comp>
//.json:
{
  "usingComponents": {
    "comp": "/components/comp/comp"  // 组件路径
  },
  "navigationBarTitleText": "自定义组件"  // 组件页面台头名
}
//.js:
Page({
  data:{
    someData:{}
  },
click(e){
console.log(e.detail.index)//子组件传递过来的数据
},
//给子组件指定id,在父组件里面调用selectComponent(id)获取子组 
 //件,然后就可以调用子组件中methods中定义的函数
onLoad: function () {
//完成父传子事件
  let myComponent = this.selectComponent('#myComponent'); // 页面获取自定义组件实例
  myComponent.componentInnerFunction(); // 通过实例调用组件事件
 },

})

相关文章

网友评论

      本文标题:微信小程序父子组件事件及参数传递

      本文链接:https://www.haomeiwen.com/subject/njaxyktx.html