ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【Vue】sync修饰符 [打印本页]
作者: 河曲智叟    时间: 2024-6-21 13:13
标题: 【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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4