【小程序】父子组件的基本操作

功能

父组件向子组件传递型号数组 子组件进行组合操作 讲库存价格数量返回给父组件

代码

1. 导入

//父组件.json
{
  "usingComponents": {
    "chooseModel": "../components/chooseModel/chooseModel"
  }

}

2. 父组件向子组件传参

    <chooseModel model='{{model}}' bind:toHome='toHome' id="model"></chooseModel>

3. 子组件接收参数

properties: {
    model: {
      type: Array //数据类型
    }
}
//使用
this.data.model

4. 子组件向父组件传递参数

 this.triggerEvent("toHome", {
   currentPrice: this.data.currentPrice,
   currentStock: this.data.currentStock,
   currentNum: this.data.currentNum,
   isNoStock: this.data.isNoStock,
 })

5. 父组件接收参数

//html
<chooseModel model='{{model}}' bind:toHome='toHome' id="model"></chooseModel>

toHome(e) {
    let { currentStock, currentPrice, currentNum,isNoStock } = e.detail;
    this.setData({
      currentStock,
      currentPrice,
      currentNum,
      isNoStock
    })
    this.setData({
      currentTotal: parseFloat(this.data.currentPrice) * parseInt(this.data.currentNum)
    })
  }

6. 父组件调用子组件方法

    this.model = this.selectComponent("#model");
    this.model.showModel();