小程序父子组件传值

先了解一下子组件的注册

页面结构大概是这样的

在父组件中：
在父组件中，使用自己写的子组件<classDetail></classDetail>，传递的值名称是detail

//父组件的wxml
    <classDetail  detail="{{item}}"></classDetail>

//父组件的js
data:{
    item:"我是父组件"
 }

要把子组件注册进去

//父组件的json
"usingComponents": {
    "classDetail": "./components/classDetail/index"
  }

在子组件：

//子组件的wxml
<view>{{detail}}<view>

父子组件都注册好了，接下来是传值

父传子：
依照上方图片下来，子组件classDetail已经绑定好一个detail的传输变量，接下来要完成子组件对父组件变量的接收

在子组件的js中，注册一下传递过来的变量

//子组件的js
  properties:{
    detail: String
  },

子组件就可以成功渲染出{{detail}}了

子传父：
有时候我们会想修改父组件传递过来的值
这时候需要用到triggerEvent

因为我用的是vant weapp框架里的按钮，里面的点击事件是bind:click，如果用的是原生button要写成bindtap

//子组件.wxml
<van-button bind:click="changeSelect">添加</van-button>

这个地方需要注意的是，我们是从properties接收的父组件值，修改的时候不是直接是this.index而是this.data.index

//子组件的js
changeSelect(){
  this.triggerEvent("updataSelect", this.data.index)
},

注意，这里的updataSelect是父组件js里的方法名称，changeSelect是子组件里的方法名称

//父组件的wxml
<shudanbook index="{{ index }}" bind:updataSelect="changeSelect" ></shudanbook>

//父组件的js
  changeSelect(event){
  //获得传递过来的值
    let changeIndex = event.detail
    var changeDate = "bookList["+changeIndex+"].choose"
    console.log(changeDate)
    this.setData({
      [changeDate]:true
    })
  },

就可以啦