组件之间通信

组件间通信可以分为以下几种:

1. 父子组件之间通信

   1. 父传子
   2. 子传父

2. 兄弟组件之间通信

父传子 properties

在之前的内容中,我们已经学习了,在通过在子组件中 定义 properties相关的属性,然后在使用子组件的地方,传相应字段的数据给子组件即可

子传父

我们可以 自定义 事件监听的方式,将子组件的数据传递给父组件,

步骤如下:

1. 在父组件里bind的方式自定义一个事件

    <component-tag-name bindmyevent="onMyEvent" />
   

2. 在子组件中通过 triggerEvent 来通知父组件执行 绑定的事件对象的函数

    this.triggerEvent('myevent')
   

示例

在子组件里添加一个输入框,当输入完成之后,将输入的结果传递给父组件

1. 子组件wxml

        <view class="wrapper">
            <view>这里是组件的内部节点</view>
            <input type="text" bindchange="changeValue"/>
        </view>
   

2. 子组件js文件

    // components/mt-component/mt-component.js
    Component({
        methods: {
            changeValue(e){
            console.log('e----', e.detail)
                this.triggerEvent("getValue",e.detail.value)
            }
        }
    })
   

3. 父组件的wxml文件

    <view>
        <mt-component bindgetValue="getValue"></mt-component>
    </view>
   

4. 父组件的js文件

    Page({
        getValue(ev){
            console.log("getValue事件被触发了", ev.detail)
        }
    })
   

组件实例传值

可在父组件里调用 this.selectComponent ，获取子组件的实例对象。

调用时需要传入一个匹配选择器 selector，如：this.selectComponent(".my-component")。

示例

1. 子组件html文件

        <view class="mt-component">
            <view>这里是组件的内部节点</view>
            <input type="text" model:value=""/>
        </view>
   

2. 子组件js文件

    // components/mt-component/mt-component.js
    Component({
        data(){
            return {
                childValue: ''
            }
        }
    })
   

3. 父组件wxml文件

        <view>
            <mt-component class="mt-component">
            </mt-component>
            <button bindtap="getChildValue">获取</button>
        </view>
   

4. 父组件js文件

        Page({
            getChildValue(){
                const child = this.selectComponent(".mt-component")
                console.log('child', child.data.value)
            }
        })