您现在的位置是:首页 >技术交流 >微信小程序-父子组件之间的通信网站首页技术交流

微信小程序-父子组件之间的通信

瑶瑶旺仔 2024-06-02 12:00:03
简介微信小程序-父子组件之间的通信

父子组件之间通信的3种方式:

  1. 属性绑定

    1. 用于父组件向子组件的指定属性设置数据,仅能设置JSON兼容的数据

    2. 子组件在properties节点中声明对应的属性并使用。代码:

      //子组件的properties节点
      properties:{
          count:Number
      }
      ​
      //子组件的wxml结构
      <text>子组件count的值为:{{count}}</text>

  2. 事件绑定

    1. 用于子组件向父组件传递数据,可以传递任意数据

    2. 事件绑定用于实现子向父传值,可以传递任意类型的数据,使用步骤:

      1. 在父组件的js中,定义一个函数,这个函数即将通过自定义时间的类型,传递给子组件

        //在父组件中定义syncCount方法
        //将来,这个方法会被传递给子组件,供子组件进行调用
        syncCount(){
            console.log('syncCount')
        }

      2. 在父组件的wxml中,通过自定义事件的形式,将步骤1中定义的函数引用,传递给子组件

        <!--使用bind:自定义事件名称(推荐:结构清晰)-->
        <my-test3 count="{{count}}" bind:sync='syncCount'></my-test3>
        ​
        <!--或在bind后面直接写上自定义事件名称-->
        <my-test3 count="{{count}}" bindsync='syncCount'></my-test3>

      3. 在子组件的js中,通过调用this.triggerEvent('自定义事件名称',{/参数对象/}),将数据发送到父组件

        //子组件的wxml结构
        <text>子组件中,count值为:{{count}}</text>
        <button type="primary" bindtap="addCount">+1</button>
        ​
        //子组件的js代码
        methods:{
            addCount(){
                this.setData({
                    count:this.properties.count+1
                })
                this.triggerEvent('sync',{value:this.properties.count})
            }
        }

      4. 在父组件的js中,通过e.detail获取到子组件传递过来的数据

        syncCount(e){
            this.setData({
                count:e.detail.value
            })
        }

  3. 获取组件的实例

    1. 父组件还可以通过this.selectComponent("id或者class选择器")获取子组件实例对象

    2. 这样就可以直接访问子组件的任意数据和方法

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。