美文网首页
小程序 - 组件通信 - 子传父@小四

小程序 - 组件通信 - 子传父@小四

作者: 王云飞_小四_wyunfei | 来源:发表于2018-12-07 09:46 被阅读0次

    小程序 - 组件通信 - 子传父,代码如下:

    // 第一步:通过自定义事件的方式通知父组件
    // components/music/index.js
    Component({
      /**
       * 组件的属性列表
       */
      properties: {
        name: String,
        type: String
      },
      methods: {
        onMusic () {
          /*
           *第一步:通过自定义事件的方式通知父组件
           triggerEvent 指定事件名、detail对象和事件选项 - 通知父组件
            parentReceive自定义事件名、name: '雪落下的声音'要传递过去的数据、事件选项有三个(见官网)
          */
          this.triggerEvent('parentReceive', {
            name: '雪落下的声音'
          }, {})
        }
      }
    })
    
    <!--第二步:事件绑定 -->
    <!--components/music/index.wxml-->
    <view>music:{歌曲名称:{{ name }},类型:{{ type }}}</view>
    <button bind:tap="onMusic">通知父组件</button>
    
    
    <!-- 
    第三步:在组件标签上绑定在子组件中自定义的事件“parentReceive”,通过回调函数的形式在父组件中进行逻辑处理;
    pages/index/index.wxml
    -->
    <f-music name="成都" type="2" bind:parentReceive="parentCallBack" />
    
    // 第四步:在回调函数的事件对象中进行数据接收
    // pages/index/index.js
    Page({
      // 第四步:在回调函数的事件对象中进行数据接收
      parentCallBack (event) {
        console.log(event)
      }
    })
    

    https://github.com/xiaosi0707/wechat-miniProgram-demo/tree/master/child-parent

    同学们听我说

    相关文章

      网友评论

          本文标题:小程序 - 组件通信 - 子传父@小四

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