通过一个案例,彻底理解Vue中 sync 修饰符

本文详细介绍了Vue.js中sync修饰符的使用,通过创建一个自定义对话框组件myDialog与父组件test的交互实例,阐述了如何实现父子组件间的数据传递和状态更新。通过点击按钮显示和关闭对话框,展示了sync修饰符简化更新父组件状态的代码,以及$emit事件的使用方法。同时,强调了Vue中prop的单向数据流原则,强调了使用sync修饰符的必要性和规范性。
摘要由CSDN通过智能技术生成

前言:

看此文章之前我希望你比较熟悉:父子组件之间的传值(prop与$emit)。

在看文章时你需要一边敲一边看。可以先直接复制我的代码快速过一遍(代码并没有难度都是基础),然后再自己敲。

如下的代码是在脚手架中运行,复制前你需要搭建好 vuecli 脚手架
sync 修饰符是一个非常重要的知识点,将页面拆分成一个个组件的时候就经常用到 sync 修饰符。比如你做过 vue+element-ui 的管理系统,要对分页组件拆分成一个独立的子组件这个时候一定会使用到 sync 修饰符

为了深入理解,我们需要两个组件 myDialog.vue(对话框组件)test.vue。其中 myDialog.vue 为子组件, test.vue为父组件。

需要完成的功能:当我们点击父组件的显示按钮会弹出对话框组件。并且当我们点对话框的“确定”或“取消”按钮也要将子组件隐藏实际效果就是模仿 element-ui 制作一个自己的 dialog 组件。效果如下:

在这里插入图片描述

基础结构如下(样式你自己来决定,完整代码我会补充在最后):

  • myDialog.vue 子组件
<template>
  <div>
    <div>
      <h1>Hello</h1>
      <div>
        <button>取消</button>
        <button>确定</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'myDialog',
}
</script>
  • test.vue 父组件
<template>
  <div>
    <button>点击显示对话框</button>
    <my-dialog />
  </div>
</template>

<script>
import myDialog from './myDialog'
export default {
  name: 'test',
  components: {
    myDialog,
  },
}
</script>
解决思路:
  • 我们要在父组件中定义一个 isShow 变量默认值为false,并将 isShow 传给对话框组件,整个对话框的显示和隐藏都是由父组件的 isShow 来决定
  • 点击父组件的显示按钮将 isShow 进行取反。
  • 那么点击对话框的“确定”或者“显示”的时候我们就需要改变父组件的 isShow。(给对话框的按钮绑定点击事件,点击利用 发出一个 update 事件

补充:你可能会想在子组件中直接修改,父组件传过来的 isShow 岂不是更加简单。但是父组件传给子组件的 prop 是单向数据流,数据是只读的,不允许修改。强行修改不仅没有效果并且控制台会报错

所以代码可以修改如下:
<!-- 父组件 -->
<template>
  <div>
    <button id="btn" @click="isShow = !isShow">点击显示对话框</button>
    <my-dialog :isShow="isShow" @update="isShow = $event" />
  </div>
</template>

<script>
import myDialog from './myDialog'
export default {
  name: 'test',
  data() {
    return {
      isShow: false,
    }
  },
  components: {
    myDialog,
  },
}
</script>

<!-- 对话框组件 -->
<template>
  <div id="test" v-show="isShow">
    <div class="box">
      <h1>Hello</h1>
      <div>
        <button @click="updateShow">取消</button>
        <button @click="updateShow">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'myDialog',
  props: {
    isShow: {
      type: Boolean,
      default() {
        return false
      },
    },
  },
  methods: {
    
  },
}
</script>

关于事件中的 $event

  • 如果是js原生事件,那么 $event 为”事件对象“。
  • 如果是子组件利用 $emit() 发出的自定事件,那么 $event 表示自定义事件传过来的参数
  • 所以如上代码可以直接在组件标签上进行赋值:@update="isShow = $event"

为了更加能够语义化,更加清楚的表示需要修改的数据,可将部分代码修改如下

  • 子组件

    • updateShow() {
        //你可以将添加的 :isShow 理解为标识
        //这也是在 sync 做铺垫,要使用 sync 子组件比如遵从如下写法('update:xx')
        this.$emit('update:isShow', !this.isShow)
      },
      
  • 父组件

    • <!-- 监听子组件发出的事件也要携带 :isShow 标识 -->
      <my-dialog :isShow="isShow" @update:isShow="isShow = $event" />
      
  • 补充:这里的 update:xx 其中 update 其实不是固定写法,你也可以换成其他字符,比如 u:xx,父子组件都要同时改为 u但是!!当你使用 sync 修饰符的时候 update: 就是一个固定的写法,为了方便 update: 我们一般都认为这是固定的写法,不管有没有使用 sync 修饰符

sync 修饰符:

sync 修饰符就是用于简化父组件 @update:isShow="isShow = $event" 这一行代码而诞生的。

使用:

<my-dialog :isShow.sync="isShow" />

使用了 sync 修饰符,vue会自动帮你编译出 @update:isShow="isShow = $event" 这一行代码。

注意!!子组件中的写法还是一样需要携带标识:this.$emit('update:isShow', !this.isShow)

通过如上的分析你现在一定能理解 element-ui 中 dialog 组件为什么会使用 :visible.sync=""。你也能写出与 element-ui 类似的组件

<el-dialog
  :visible.sync="dialogVisible"
</el-dialog>

最终完整代码
<!-- 父组件 -->
<template>
  <div>
    <button id="btn" @click="isShow = !isShow">点击显示对话框</button>
    <my-dialog :isShow.sync="isShow" />
  </div>
</template>
<script>
import myDialog from './myDialog'
export default {
  name: 'test',
  data() {
    return {
      isShow: false,
    }
  },
  components: {
    myDialog,
  },
}
</script>

<style>
#btn {
  background-color: sandybrown;
  color: #fff;
  border: none;
  margin: 50px;
  height: 35px;
  padding: 0 20px;
}
</style>
  
<!-- 子组件 -->
<template>
  <div id="test" v-show="isShow">
    <div class="box">
      <h1>Hello</h1>
      <div>
        <button @click="updateShow">取消</button>
        <button @click="updateShow">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'myDialog',
  props: {
    isShow: {
      type: Boolean,
      default() {
        return false
      },
    },
  },
  methods: {
    updateShow() {
      this.$emit('update:isShow', !this.isShow)
    },
  },
}
</script>

<style>
#test {
  position: absolute;
  z-index: 10px;
  background-color: rgba(0, 0, 0, 0.3);
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
#test .box {
  width: 400px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 1px 1px 10px #999;
  background-color: #fff;
}
#test .box div {
  position: absolute;
  bottom: 0;
  right: 0;
}
#test .box div button {
  width: 80px;
  height: 35px;
  margin-right: 10px;
  border: none;
}
</style>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值