vue3已废除sync写法,v-model代替
实现state的值可以从子组件传递给父组件,也可以从父组件传递给子组件
文件地址pages/about/about.vue
<template>
<view>
<button size="mini" @click="clickBtn">开启{{mystate}}</button>
<mypop v-model:state="mystate"></mypop>
</view>
</template>
<script>
export default {
data() {
return {
mystate:false
};
},
methods:{
clickBtn(){
this.mystate=true
},
}
}
</script>
<style lang="scss">
</style>
文件地址components/mypop/mypop.vue
<template>
<view>
<view>---弹出框样式---</view>
<view class="box" :style="{height:state?'300rpx':'0'}">
{{state}}
</view>
<button size="mini" @click="closeBtn"> 关闭{{state}}</button>
</view>
</template>
<script>
export default {
name:"mypop",
data() {
return {
};
},
props:{
state:{
type:Boolean,
default:false
}
},
methods:{
closeBtn(){
this.$emit("update:state",false)
}
}
}
</script>
<style lang="scss">
.box{
width: 300rpx;
height: 300rpx;
background: pink;
}
</style>