【个人笔记】
index.vue
<template>
<view>
<button @click="clickbtn">开启{{mystate}}</button>
<mupop :state.sync="mystate" ></mupop>
</view>
</template>
<script>
export default {
data() {
return {
mystate:false
}
},
methods: {
clickbtn(){
this.mystate=true
},
state(e){
this.mystate=e
}
}
}
</script>
自定义组件下的mupop.vue
<template>
<view>
<view class="">---弹出框---</view>
<view class="box":style="{height:state ?'300rpx':'0'}"></view>
<view class="">
<button size="mini" @click="onclose">关闭</button>
</view>
</view>
</template>
<script>
export default {
props:{
state:{
type:Boolean,
default:false
}
},
name:"mupop",
data() {
return {
};
},
methods:{
onclose(){
this.$emit("update:state",false)
}
}
}
</script>
<style lang="scss">
.box{
width: 300rpx;
height:300rpx;
background-color: pink;
}
</style>
父页面:mystate默认false,通过:state.sync="mystate"
子页面使用props接受传值,三元表达式,height值为0
父页面点击【开启】按钮,clickbtn方法对mystate进行赋值
子页面点击【关闭】按钮,onclose方法通过this.$emit("update:state",false)传值给父页面
父页面通过state(e)方法进行数值接收和赋值