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

古城微笑少年丶 2021-12-14 22:51 2656阅读 0赞

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

**一、demo结构**

1>页面index

2>自定义组件tx

**二、如何定义一个组件**

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

![20190703232745543.png][]

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

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

![20190703233219314.png][]

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

![20190703233417379.png][]

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

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

2>创建组件实例对象

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

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

this.compData.show();

**五、具体代码：**

1>index页面

index.wxml

<view class="indexView">
        <view>index页面</view>
        <view class="btn" bindtap='click'>点我打印</view>
        <tx id="comp"></tx>
    </view>

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

即如下：

![20190725125126921.png][]

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

![20190725125305703.png][]

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

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

***重点！！！***

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

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

***   3》小程序自定义组件间传值可点此**：[组件间传值][Link 1]*

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

父组件index

index.wxml

index.js

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

子组件：

son.wxml

<view bindtap="clicks">点我调用父组件的方法</view>

son.js

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

最终的结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N5bGVhcG4_size_16_color_FFFFFF_t_70][]

[20190703232745543.png]: /images/20211214/99c8760c01b04a72b90c1d71eaa91258.png
[20190703233219314.png]: /images/20211214/378d27d5cb844e0db1ef8ced1ce5a34b.png
[20190703233417379.png]: /images/20211214/0ab3943f0a714d7bae2417c817f1a70e.png
[20190725125126921.png]: /images/20211214/00a4c184820d40628975856b3c118ed7.png
[20190725125305703.png]: /images/20211214/dcf6dcea369b49bbba98b6ab2666b6bd.png
[Link 1]: https://blog.csdn.net/Syleapn/article/details/97262323
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N5bGVhcG4_size_16_color_FFFFFF_t_70]: /images/20211214/d818250c953449a9983c847de3aae4b9.png