【uniapp】子组件和父组件双向绑定，vue3已废除sync写法，v-model取代 ...

vue3已废除sync写法，v-model取代
实现state的值可以从子组件通报给父组件，也可以从父组件通报给子组件

1. 文件地址pages/about/about.vue
2. <template>
3.         <view>
4.                 <button size="mini" @click="clickBtn">开启{{mystate}}</button>
5.                 <mypop v-model:state="mystate"></mypop>
6.         </view>
7. </template>
9. <script>
10.         export default {
11.                 data() {
12.                         return {
13.                                 mystate:false
14.                         };
15.                 },
16.                 methods:{
17.                         clickBtn(){
18.                                 this.mystate=true
19.                         },
20.                 }
21.         }
22. </script>
24. <style lang="scss">
26. </style>

复制代码

1. 文件地址components/mypop/mypop.vue
2. <template>
3.         <view>
4.                 <view>---弹出框样式---</view>
5.                 <view class="box" :style="{height:state?'300rpx':'0'}">
6.                         {{state}}
7.                 </view>
8.                 <button size="mini" @click="closeBtn"> 关闭{{state}}</button>
9.         </view>
10. </template>
12. <script>
13.         export default {
14.                 name:"mypop",
15.                 data() {
16.                         return {
17.                                
18.                         };
19.                 },
20.                 props:{
21.                         state:{
22.                                 type:Boolean,
23.                                 default:false
24.                         }
25.                 },
26.                 methods:{
27.                         closeBtn(){
28.                                 this.$emit("update:state",false)
29.                         }
30.                 }
31.         }
32. </script>
34. <style lang="scss">
35. .box{
36.         width: 300rpx;
37.         height: 300rpx;
38.         background: pink;
39. }
40. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。