【Vue】sync修饰符

一、介绍

作用：可以实现 子组件 与 父组件数据 的 双向绑定，简化代码
简单明白：子组件可以修改父组件传过来的props值
特点：prop属性名，可以自定义，非固定为value
   但是.sync没有v-model方便，所以当属性名确定为value，即表单元素的时候，就使用v-model
  **场景 ** 封装弹框类的底子组件， visible属性 true显示 false隐藏
本质 .sync修饰符 就是 :属性名 和 @update:属性名 合写

---

二、语法

父组件

1. // .sync写法
2. <BaseDialog :visible.sync="isShow" />
3. --------------------------------------
4. // 完整写法
5. <BaseDialog
6.   :visible="isShow"
7.   @update:visible="isShow = $event"
8. />

复制代码

子组件

1. props: {
2.   visible: Boolean
3. },
5. this.$emit('update:visible', false)

复制代码

---

三、代码示例

App.vue

1. <template>
2.   <div class="app">
3.     <button @click="openDialog">退出按钮</button>
4.     <!-- isShow.sync  => :isShow="isShow" @update:isShow="isShow=$event" -->
5.     <BaseDialog :isShow.sync="isShow"></BaseDialog>
6.   </div>
7. </template>
9. <script>
10. import BaseDialog from './components/BaseDialog.vue'
11. export default {
12.   data() {
13.     return {
14.       isShow: false,
15.     }
16.   },
17.   methods: {
18.     openDialog() {
19.       this.isShow = true
20.       // console.log(document.querySelectorAll('.box'));
21.     },
22.   },
23.   components: {
24.     BaseDialog,
25.   },
26. }
27. </script>
29. <style>
30. </style>

复制代码

BaseDialog.vue

1. <template>
2.   <div class="base-dialog-wrap" v-show="isShow">
3.     <div class="base-dialog">
4.       <div class="title">
5.         <h3>温馨提示：</h3>
6.         <button class="close" @click="closeDialog">x</button>
7.       </div>
8.       <div class="content">
9.         <p>你确认要退出本系统么？</p>
10.       </div>
11.       <div class="footer">
12.         <button>确认</button>
13.         <button>取消</button>
14.       </div>
15.     </div>
16.   </div>
17. </template>
19. <script>
20. export default {
21.   props: {
22.     isShow: Boolean,
23.   },
24.   methods:{
25.     closeDialog(){
26.       this.$emit('update:isShow',false)
27.     }
28.   }
29. }
30. </script>
32. <style scoped>
33. .base-dialog-wrap {
34.   width: 300px;
35.   height: 200px;
36.   box-shadow: 2px 2px 2px 2px #ccc;
37.   position: fixed;
38.   left: 50%;
39.   top: 50%;
40.   transform: translate(-50%, -50%);
41.   padding: 0 10px;
42. }
43. .base-dialog .title {
44.   display: flex;
45.   justify-content: space-between;
46.   align-items: center;
47.   border-bottom: 2px solid #000;
48. }
49. .base-dialog .content {
50.   margin-top: 38px;
51. }
52. .base-dialog .title .close {
53.   width: 20px;
54.   height: 20px;
55.   cursor: pointer;
56.   line-height: 10px;
57. }
58. .footer {
59.   display: flex;
60.   justify-content: flex-end;
61.   margin-top: 26px;
62. }
63. .footer button {
64.   width: 80px;
65.   height: 40px;
66. }
67. .footer button:nth-child(1) {
68.   margin-right: 10px;
69.   cursor: pointer;
70. }
71. </style>

复制代码

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