父子组件通信

一、父子组件通信

1、父传子

第1步：在父组件中传入num1，注意：num1是在父组件的data定义的数据

```html

<!-- 调用子组件： -->

<my-comp1 num="{{num1}}"></my-comp1>

<my-comp1 ></my-comp1>

```

第2步：在子组件中定义好props数据，在微信小程序中不叫props，而叫properties

在comp1.js中声明：

```js

Component({

  properties:{

    num:{

      type:String,

      value:"默认值"

    }

  }

})

```

第3步，就可以在子组件中直接使用num了：

```html

<view>这是我们第一个组件{{num}}</view>

```

2、子传父

第1步：在父组件中定义修改num1的函数

home.js中：

```js

changeFNum1(val){  

  console.log(val)

    this.setData({

      num1:this.data.num1+val.detail

    });

},

```

第2步：在父组件中调用子组件的地方传入自定义事件函数

```html

<my-comp1 num="{{num1}}" bind:fn="changeFNum1"></my-comp1>

```

第3步：在子组件内部做点击事件，通过 this.triggerEven  来触发这个事件函数

```html

<button type="primary" bindtap="hdtap">按钮</button>

```

comp.js中：

```js

Component({

  properties:{

    num:{

      type:String,

      value:"默认值"

    }

  },

  methods:{

    hdtap(){

      this.triggerEvent("fn",10)

    }

  }

})

```