小程序父子组件间属性和函数的互相调用

1、先引进组件

• sup 页面引入 rollingLoad 页面（组件）

{
    "usingComponents": {
      "comm-scroll":"../components/rollingLoad/rollingLoad"
    }
}

<comm-scroll></comm-scroll>

• 定义子组件的属性和函数

Component({
    /**
     * 组件的属性列表
     */
    properties: {
        sourceData:{
            type:Object,
            value:{name:'阿明',value:'18'}
        }
    },
    /**
     * 组件的初始数据
     */
    data: {
    },
    /**
     * 组件的方法列表
     */
    methods: {
        // 子组件函数
        getChildFuc(){
            console.log('父组件调子组件函数');
        },
    }
});

2、父组件调用子组件

<view catchtap="getChild">调子组件</view>
<comm-scroll id="my"></comm-scroll>

// 父组件调子组件函数
getChild(){
    let myCom = this.selectComponent("#my");
    myCom.getChildFuc();
    console.log(myCom.data.sourceData);
},

3、子组件调用父组件

• 父组件

<comm-scroll id="my" scrollH="{{heightTest}}" bind:componentFun="pageFun"></comm-scroll>

/**
* 页面的初始数据
*/
data: {
    heightTest:50,  //父组件属性
},
// 父组件函数
pageFun(){
    console.log('子组件调父组件函数');
},

• 子组件

<scroll-view scroll-y="{{true}}" style="height: {{scrollH}}vh;" enable-back-to-top='true'>
  <view catchtap="toParentFuc">父组件属性：{{scrollH}}</view>
</scroll-view>

// 子组件调父组件函数
toParentFuc(){
    this.triggerEvent("componentFun", {});
},