微信小程序引用页面调用组件内的方法（父组件调用子组件的方法）

近期在做一个项目，小程序普通页面调用引入组件里面的方，网上看了很多资料，还是被粗心的自己给整哭了。所以做完项目记录下：

一、demo结构

1>页面index

2>自定义组件tx

 

二、如何定义一个组件

在tx.json中将component设置为true，即

三、引入组件（在index页面引入自定组件tx）

1>在index.json中进行组件声明

2>在index页面中以标签的形式引入组件

 

四、在index页面中调用组件tx中的方法

1>在上定义节点id，id的名字随便起，如：

2>创建组件实例对象

this.compData=selectComponent("#comp");

3>在需要的地方调用组件的方法

this.compData.show();

五、具体代码：

1>index页面

index.wxml

    index页面
    点我打印
    

index.wxss

.indexView{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btn{
  background-color:aquamarine;
  color:#fff;
  font-size:30rpx;
  padding:10rpx 40rpx;
  border-radius: 10rpx;
  margin-top:50rpx;
  margin-bottom: 50rpx;
}

index.js

Page({

  onLoad: function(){
   this.compData = this.selectComponent("#comp")
  },
  click: function(){
    this.compData.show();
  }
})

说明：调用数据的话直接:this.compData.data.名字

index.json

{
  "usingComponents": {
    "tx":"/pages/tx/tx"
  }
}

2>tx组件

tx.wxml

组件页

tx.js

Component({
  methods:{
    show: function(){
      console.log("show........")
    }
  }
})

tx.json

{
  "component":true
}

 

六、点击按钮结果

输出：show........

 

说明与延伸：1>组件实例对象在页面生命周期函数中初始化或在需要使用的地方（index.js中的click函数中）初始化都ok！

2>把index页面改成组件也是这样调用（父组件调用子组件中的方法），

只需将index页面进行一个简单的调整，在index.json中多加一个 "component":true

即如下：

然后将index.js中的page替换成Component，click方法放在methods中即可：

最后输出：show........

说明父组件调用子组件方法成功~

 

重点！！！

   1》通过selectComponent不仅可以调用子组件的方法，还可以调用子组件内的任意数据！

   2》子组件调用父组件里的方法与子组件向父组件传值一个原理，通过triggerEvent，所以说子组件调用父组件方法的同时也可以向父组件传值》

   3》小程序自定义组件间传值可点此：组件间传值

 

以上是父组件调用子组件的方法，下面进行一个补充，子组件调用父组件中的方法！

父组件index

index.wxml

index.js

Component({
   methods:{
     slow: function(e){
       console.log("我是父组件中的slow")
     }
   }
})

子组件：

son.wxml

点我调用父组件的方法

son.js

Component({

  methods:{
     clicks: function(){
       this.triggerEvent("transfer")
     }
  }
})

最终的结果：