原生小程序如何 父给子组件传值交互

一、demo结构

1>页面index

2>自定义组件tx

二、如何定义一个组件

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

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

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

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

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

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

1. <tx id="comp"></tx>

2>创建组件实例对象

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

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

1. this.compData.show();

五、具体代码：

1>index页面

index.wxml

1. <view class="indexView">
2. <view>index页面</view>
3. <view class="btn" bindtap='click'>点我打印</view>
4. <tx id="comp"></tx>
5. </view>

index.wxss

1. .indexView{
2. display: flex;
3. flex-direction: column;
4. align-items: center;
5. }
7. .btn{
8. background-color:aquamarine;
9. color:#fff;
10. font-size:30rpx;
11. padding:10rpx 40rpx;
12. border-radius: 10rpx;
13. margin-top:50rpx;
14. margin-bottom: 50rpx;
15. }

index.js

1. Page({
3. onLoad: function(){
4. this.compData = this.selectComponent("#comp")
5. },
6. click: function(){
7. this.compData.show();
8. }
9. })

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

index.json

1. {
2. "usingComponents": {
3. "tx":"/pages/tx/tx"
4. }
5. }

2>tx组件

tx.wxml

1. <view>组件页</view>

tx.js

1. Component({
2. methods:{
3. show: function(){
4. console.log("show........")
5. }
6. }
7. })

tx.json

1. {
2. "component":true
3. }

六、点击按钮结果

输出：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

1. <view class="indexView">
2. <son bindtransfer="slow"></son>
3. </view>

index.js

1. Component({
2. methods:{
3. slow: function(e){
4. console.log("我是父组件中的slow")
5. }
6. }
7. })

子组件：

son.wxml

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

son.js

1. Component({
3. methods:{
4. clicks: function(){
5. this.triggerEvent("transfer")
6. }
7. }
8. })

最终的结果：