Sub-components:
< view class="dialog" hidden=" {{show}}">
< view > {{title}} < / view >
< view > {{content}} < / view >
< view class="btn" >
<text bindtap="confirmEvent"></text>
<text bindtap="cancelEvent"></text> < / view >
< / view >
Sub-component js:
properties: {
title:{
value:"",
type: String,
},
content: {
value: "",
type: String,
},
show:{
type:Boolean,
value:false
}},
/ *
- initial data of the component
* /
data: {
},
ready:function () {
console.log("ready")},
parent component:
< compontent_child id= "child" data-show= "{{show}}" title= "11111111" content= "2222222222" bindcancelEvent= "_ cancelEvent"
bindconfirmEvent="_confirmEvent"></compontent_child> < button bindtap="showDialog" > Click on the pop-up window < / button >
parent component js:
/ / pages/parent/parent.js
Page ({
/ *
- initial data of the page
* /
data: {
show:true},
showDialog:function (e) {
this.setData({
show:!this.data.show,
})
console.log(this.data.show)}
})
at present, according to the showDialog event of the parent component, you want to control the show, to use data-show to pass to the child component, and the child component receives the value of show, thus controlling the display and hiding
.