微信小程序系列（九）：子组件传参至父组件

上一节我们讲到如何参数到组件及父组件如何传参至子组件中，下面我们将继续讲解子组件如何传参至父组件中

http://www.fcors.com/%e6%8a%80%e6%9c%af%e4%b8%8e%e6%a1%86%e6%9e%b6/%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f%e9%a1%b5%e9%9d%a2%e8%b7%b3%e8%bd%ac%e5%8f%8a%e7%bb%84%e4%bb%b6%e4%bc%a0%e5%8f%82%e8%87%b3%e5%ad%90/

接上上节的例子，父组件realm,子组件fence,子子组件cell。

如何把子组件传参至父组件及传参至父父组件中呢？

首先在子组件的index.wxml中绑定函数bind:tap=”onTap”
在子组件的index.js中的method中使用this.triggerEvent原生方法
在父组件的method中定义子组件命名的方法函数

如果需要传参至父父组件的方法

1、子组件先传到父组件；由父组件再传参至父父组件

2、在子组件的triggerEvent方法中把两个变量设置成true,如：bubbles:true,composed:true

下面如子组件如何传参到父父组件的第2中方法为例

1、在子组件的index.wxml中绑定一个tap方法

<view bind:tap="onTap" class="container {{c.statusStyle(cell.status).outer}}" >
    <view class="inner-container {{c.statusStyle(cell.status).inner}}">
        <text>{{cell.title}}</text>
    </view>
</view>

2、在子组件的index.js中的method中定义传给父组件的方法。

注意本教程是子组件传参到父父组件，所以两个参数需要设置成true

此处定义了父组件调用的方法是：celltap

 methods: {
        onTap(event){
            this.triggerEvent('celltap',{
                //子组件通过这个方式，把参数传到父组件
                //父组件通过index.js的properties中设置
                //这次是cell传参到realm，跳过fence，此时bubbles和composed必须开启true
                //修改realm中的index.wxml和index.js
                cellA:this.properties.cell,
                x:this.properties.x,
                y:this.properties.y
            },{
                bubbles:true,
                composed:true
            })
        }
    }

3、父组件调用方法接收参数

在父父组件的index.js中的method接收参数并处理参数

methods: {
        bingInitData(fenceGroup){
            this.setData({
                fences:fenceGroup.fences
            })
            // console.log(fenceGroup.fences)
        },
        onCellTap(event){
            const cell = event.detail.cellA;
            
            const x = event.detail.x;
            const y = event.detail.y;
            
            // const x = event.detail.x;
            // const y = event.detail.y;
            /**设置x在realm的wxml中设置 y在fence.wxml 
             * 然后分别修改两个组件的js 赋值变量
             */
            const judger = this.data.judger
           judger.judge(cell,x,y)
            /**在judge类处理cell */
            this.setData({
                fences:judger.fenceGroup.fences
            })
        }
    }

完成，子子组件传参到父组件

打赏赞