微信小程序 父子组件通讯/传值

3种方式：

• 属性绑定：父组件 向 ——> 子组件的指定属性设置数据。仅能设置json兼容的数据，如：基本数据类型、object等 (不能传递复杂属性的数据，如：方法等）。
• 事件绑定：子组件 向 ——> 父组件传递数据。（调用triggerEvent方法) 可传递任意数据
• 获取组件实例：通过   方法，获取子组件实例对象，这样就可以直接访问子组件的任意数据和方法。【在父组件中，为子组件添加类名--id / class名，通过selectComponent('子组件id/class名')获取子组件实例及其内部的方法、属性等】

// 父组件

// 子组件

父组件：

1. 定义传入子组件的数据(也可以不定义直接传）
2. 定义子组件将要调用的函数
3. 子组件调用后，通过e.detail获取子组件传递过来的数据

// .wxml 将事件传递给子组件 bind:xxx(子组件调用时的名称，随便起)='父组件中函数名'
// 方法一：bind:+ 方法名(子组件triggerEvent方法中调用的函数名称）。(推荐写法 -- 结构清晰)
<test max='10'  age='{{age}}' obj='{{propsObj}}' bind:compToPage='syncAge' />

// 方法二：bind+ 方法名(不加:号）
<test max='10'  age='{{age}}' obj='{{propsObj}}' bindcompToPage='syncAge' />
  
// 父组件： .js文件：
// 父组件中 data数据
data: {
    age:32,
    propsObj:{
        name:'黑白'
    }
},
// 父组件 中的方法
syncAge(e) {
    console.log(e, e.detail) // 父组件传过来的值： {age: 34, name: "白白"}
    // 用e.detail传入的值，更新 父组件中的 age
    this.setData({
        age:e.detail.age
    })
},

子组件：

1. .js文件：properties属性中定义变量，接收父组件传进来的值
2. 通过this.triggerEvent('父组件中的事件名称', { 参数对象 } )，触发父组件函数，“同步”修改父组件的值。（效果：点击 “子组件 add Age”按钮，修改子组件age的值后，执行triggerEvent方法同时修改父组件age中的值 -- 做到同步的效果）
3. 注意：同一页面多次引入同一组件(test组件)时：
   1. 修改max，min的时候，同一页面各组件之间的max、min值不会影响。( 因为没有修改父组件的值，所以 )
   2. 修改age的时候，各组件间的age值会同时+2。( 因为修改了父组件的值， 父组件又会同时传入组件中，所以同页面各组件的值会被一起更新 ）

// 子组件 .wxml
<view class="bor_yg_globalCSS">   
    <view>子组件properties 中 max ： {{max}}</view>
    <view>子组件properties 中 min ： {{min}}</view>

    <view>~~~~~~~~ 父组件 传入 obj（对象） ~~~~~~~~~~~~</view>
    <view>子组件obj： {{properties.obj}}</view> // 输出：空 (无值）
    <view>子组件obj： {{obj}}</view> //输出： [object Object]
    <view>子组件obj： {{obj.name}}</view>//输出：黑白（父组件传入的值）

    <view>~~~~~~~~父组件 传入 age（基本类型）~~~~~~~~~~~~</view>
    <!-- <view>data 中 age ：{{age}}</view> -->
    <view>子组件 properties 中 age ：{{age}}</view>//输出：32
    <button bindtap="addAge" size="mini" type="primary">子组件 add Age</button>//更新父组件中age的值(修改子组件的age后，同步修改父组件age -- 类似实现双向绑定)

</view>

// .js 文件
// 通过properties定义接受父组件传进来的值
   properties: {
        age: Number,
        max: Number, // 简化写法，无指定默认值
        min: { // 完整接收传入组件数据写法，可指定默认值
            type: Number, // 传入类型
            value: 12, //默认值
        },
        obj: Object,
    },
//
addAge() {
    this.setData({
        age: this.properties.age + 2
    })
    this.triggerEvent('compToPage',{age:this.properties.age,name:'白白'})
}

• 获取(子)组件实例

1. // 获取子组件实例

   getChildComp(){

   let testChild=this.selectComponent('#testChildComp');

   console.log(testChild)

   },

//.wxml : 为子组件添加id
 <test max='10'  id="testChildComp" />

// .js : 获取子组件实例（通过selectComponent方法传入子组件id）
getChildComp(){
    let testChild = this.selectComponent('#testChildComp');
    console.log(testChild) // 通过控制台可以看到，子组件(methods)中定义的方法(如：addAge)，在 testChild中的__proto__上，所以可以直接调用（testChild.addAge)
    // 调用testChild(子组件)中的setData， 修改子组件的值
    // *注意：不能使用this，要使用testChild调用。this调用的是父组件的方法，只能修改父组件的值
    testChild.setData({
        count: 99,
    })
    // 调用子组件methods中定义的方法
    testChild.addAge()
},