先了解一下子组件的注册
页面结构大概是这样的
在父组件中:
在父组件中,使用自己写的子组件<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
})
},
就可以啦