前言

1. 今天我们要学习的是父子之间的传递
2. 在开始学习之前我们要先了解一些基础的知识

基础概念

一、父传子：

父组件使用数据绑定，子组件内部使用properties接收要用observers进行处理

（1）observersobservers 属性通常用于组件内部，用于监听指定属性的变化，并在属性值发生变化时执行相 应的操作。因此，它通常用于子组件内部，用于监听父组件传递的属性值的变化。
（2）properties 是小程序中定义组件属性的一个配置项。通过 properties，可以定义组件所接受的外部传入的数据，并指定数据的类型、默认值等

子传父

1. 自定义组件内部使用 triggerEvent 方法发射一个自定义的事件，同时可以携带数据。
2. 自定义组件标签上通过 bind 方法监听 发射的事件，同时绑定事件处理函数，在事件函数函数中通过事件对象获取传递的数据

其他

1. usingComponents 是小程序中用于引入自定义组件的配置项。通过在页面的 JSON 配置文件中使用 usingComponents，可以引入自定义组件并为其指定别名，以便在页面中使用。
2. data赋初值和properties赋初值的区别：
   （1）properties定义的外部数据，可以在组件的外部传入。
   properties 中的属性值可以是任意类型，包括基本类型（如 String、Number、Boolean）、数组、对象等。 通过 properties 定义的属性，可以在组件的标签上通过属性的形式传递数据，供组件内部使用。
   （2）data：用于定义组件的内部数据，可以在组件内部使用。
   data 中定义的数据是组件的私有数据，只能在组件内部访问和修改。
   data 中的数据是组件实例化后自身的初始值，不会受外部传入数据的影响。
   data 中的数据一般用于存储组件内部的状态、临时数据等，不涉及与外部的交互。
   （3）对于通过 properties 定义的属性，外部传入的值会覆盖 properties 中设置的默认值。

实例

在全局或者局部引入自定义的组件usingComponents清除

**注意：**要将index原 1、全局引入(app.json) 2、局部引入(index.json)

父传子

文件夹

提示： 1、Parent_to_son是子文件 2、index是父文件

<!-- 这是子组件 -->
<view>num :{{ num }}</view>

Component({
  properties: {
    num: {
      type: Number,
      value: 0
    }
  },
  //此处注意:可以在properties赋初值，
  observers :{
    'num': function(newVal, oldVal) {
      // 在 num 属性值发生变化时执行的操作
      console.log('num 属性值发生了变化，新值为:', newVal, '旧值为:', oldVal);
    }
  }
});

<!-- 这是父组件 -->
<view>
  <Parent_to_son num="{{ num }}"/>
  <button type="primary" plain bind:tap="handleIncrement">增加</button>
</view>

Page({
  data: {
    num: 0
  },
  handleIncrement() {
    this.setData({
      num: this.data.num + 1
    });
  }
});

子传父

文件夹

提示： 1、son_to_parent是子文件 2、index是父文件

<!-- 这是子组件 -->
<button type="primary" plain bindtap="sendData">子组件按钮</button>

Component({
    data:{
        count:100
    },
    methods:{
      sendData(){
          const newCount = this.setData({count:this.data.count -1}) || this.data.count
          this.triggerEvent('myevent',newCount)
        }
  },
});

<!-- 这是父组件 -->
<view>
  <son_to_parent bind:myevent="getData"/>
  <view>父组件count:{{ count }}</view>
</view>

Page({
    data: {
      count:''
    },
    getData(event){
      this.setData({
          count:event.detail
      })
  }
  });