Vue中sync修饰符分析原理及用法示例

更新时间：2022年08月04日 09:14:02 作者：Celester_best

在vue中，子组件如果想修改父组件的变量，一般做法是通过绑定事件的方法，父组件向子组件传递修改变量的方法，子组件触发修改变量的方法执行，这种方式中规中矩；另一种方法是使用sync修饰符，此方法可以减少很多代码量

不使用sync修饰符的代码示例

父组件：

<template>
  <div>
    <div v-if="show">11111</div>
    <h3>下面是子组件</h3>
    <SyncDemo :show="show" @update="update"></SyncDemo>
  </div>
</template>
<script>
import SyncDemo from "./SyncDemo.vue";
export default {
  name: "Test",
  components: { SyncDemo },
  props: [],
  data() {
    return {
      show: true,
    };
  },
  methods: {
    update(flag) {
      this.show = flag;
    },
  },
};
</script>

子组件：

<template>
  <div>
    <button @click="changeFlag">点击</button>
  </div>
</template>
<script>
export default {
  name: "SyncDemo",
  components: {},
  props: ["show"],
  methods: {
    changeFlag() {
      this.$emit("update", !this.show);
    },
  },
};
</script>

点击子组件的按钮就可以控制父组件“11111”的显示与隐藏。

使用sync修饰符，代码就会简单很多。

使用sync修饰符的代码示例

父组件：

<template>
  <div>
    <div v-if="show">11111</div>
    <h3>下面是子组件</h3>
    <SyncDemo :show.sync="show"></SyncDemo>
  </div>
</template>
<script>
import SyncDemo from "./SyncDemo.vue";
export default {
  name: "Test",
  components: { SyncDemo },
  props: [],
  data() {
    return {
      show: true,
    };
  },
};
</script>

子组件：

<template>
  <div>
    <button @click="changeFlag">点击</button>
  </div>
</template>
<script>
export default {
  name: "SyncDemo",
  components: {},
  props: ["show"],
  methods: {
    changeFlag() {
      this.$emit("update:show", !this.show);
    },
  },
};
</script>

可以看到使用sync修饰符之后，父组件就不需要向子组件传递方法，父组件也不需要特意写修改变量的方法了。此时点击子组件的按钮，一样可以控制父组件的“11111”的显示与隐藏。

sync修饰符的原理

在不使用sync时父组件中子组件绑定的update事件没有传递参数，其实绑定事件默认传递了$event参数。

这里值得注意的是如果绑定的是clikc等原生事件时，$event是指事件对象，如果是自定义事件，$event则指子组件触发该方法时传递的参数，在上面的例子中，$event则指show变量。

所以不使用sync修饰符时，父组件的代码可以改造成如下（直接将$event赋值给show变量，父组件不需要再另外写一个修改变量的方法）：

<template>
  <div>
    <div v-if="show">11111</div>
    <h3>下面是子组件</h3>
    <SyncDemo :show="show" @update="show = $event"></SyncDemo>
  </div>
</template>
<script>
import SyncDemo from "./SyncDemo.vue";
export default {
  name: "Test",
  components: { SyncDemo },
  props: [],
  data() {
    return {
      show: true,
    };
  },
};
</script>

我们再进一步修改代码（绑定方法时指明要修改的变量）：

<SyncDemo :show="show" @update:show="show = $event"></SyncDemo>

这行代码的语法糖的方式就是使用sync修饰符（代码变得更简单）

<SyncDemo :show.sync="show"></SyncDemo>

以上就是通过一步步代码演变，最后变成使用sync修饰符的方式修改父组件的变量，使我们明白了sync修饰符的原理。

现粘贴vue官网上关于sync修饰符的解释：

到此这篇关于Vue中sync修饰符分析原理及用法示例的文章就介绍到这了,更多相关Vue sync修饰符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue基于iview实现登录密码的显示与隐藏功能
这篇文章主要介绍了Vue基于iview实现登录密码的显示与隐藏功能,本文通过截图实例代码说明给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-03-03
Vue之el-option下拉框绑定问题
这篇文章主要介绍了Vue之el-option下拉框绑定问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
详谈vue中的rules表单验证(常用)
这篇文章主要介绍了关于vue中的rules表单验证(常用)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
vue-router子路由的实现方式
这篇文章主要介绍了vue-router子路由的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-02-02
Vue进阶之CodeMirror的应用小结
CodeMirror支持在线编辑代码，风格包括js, java, php, c++等等100多种语言，下面这篇文章主要来和大家讲讲CodeMirror的应用，感兴趣的可以了解一下
2023-06-06
解决vue项目 build之后资源文件找不到的问题
这篇文章主要介绍了解决vue项目 build之后资源文件找不到的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
一文带你了解threejs在vue项目中的基本使用
three.js是一个用于在Web上创建三维图形的JavaScript库,它可以用于创建各种类型的三维场景,包括游戏、虚拟现实、建筑和产品可视化等,下面这篇文章主要给大家介绍了关于如何通过一文带你了解threejs在vue项目中的基本使用,需要的朋友可以参考下
2023-04-04
简单谈谈Vue3中的ref和reactive
vue3中实现响应式数据的方法是就是使用ref和reactive,所谓响应式就是界面和数据同步,能实现实时更新,下面这篇文章主要给大家介绍了关于Vue3中ref和reactive的相关资料,需要的朋友可以参考下
2023-04-04
Vue中嵌入可浮动的第三方网页窗口的示例详解
本文介绍了在Vue2项目中嵌入可浮动的第三方网页窗口的实现方法,包括使用iframe、div+script和dialog元素等方式,并提供了一个实战Demo,展示了如何在Vue组件中动态加载和控制浮窗的显示,需要的朋友可以参考下
2025-02-02
vue中异步数据获取方式(确保数据被获取)
这篇文章主要介绍了vue中异步数据获取方式(确保数据被获取)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-01-01