为了账号安全,请及时绑定邮箱和手机立即绑定

对 vue 修饰符 .sync 的理解

2019.08.13 21:51 155浏览

其实对这个属性有点陌生,一直都好像没怎么用到这个属性,但是就在今天,因为公司现在重构的这个项目是拿着element-ui的组件库改造的组件,变成公司自己的组件,所以当我在使用某一些组件的时候,好像是在使用 模态框的时候,我看到的这个属性,特别的好奇,
在这里插入图片描述
在使用的时候确实这样使用的
在这里插入图片描述
其实看官网就比较清楚了
在这里插入图片描述
在这里插入图片描述
在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中,我们发现 .sync 还是有其适用之处,比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起我们重新引入了 .sync 修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。

<comp :foo.sync="bar"></comp>

会被扩展为:

<comp :foo="bar" @update:foo="val => bar = val"></comp>

当子组件需要更新 foo 的值时,它需要显式地触发一个更新事件:

this.$emit('update:foo', newValue)

我们可以写一个MyComponent.vue子组件

<template>
<div v-if="show">
  <p>默认初始值是{{show}},所以是显示的</p>
  <button @click.stop="closeDiv">关闭</button>
</div>
</template>

<script>
export default {
  name: "myComponent",
  props: ['show'],
  methods: {
      closeDiv() {
        this.$emit("update:show", false)
      }
    }
}
</script>

再编写一个父组件 Synca.vue

<template>
  <div class="details">
    <myComponent :show.sync="valueChild" style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
    <button @click="changeValue">toggle</button>
  </div>
</template>
<script>
import myComponent from "../components/MyComponent"
export default {
  components: {
    myComponent
  },
  data() {
    return {
      valueChild: true
    }
  },
  methods: {
    changeValue() {
      this.valueChild = !this.valueChild
    }
  }
}
</script>

在这里插入图片描述
vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。如果我们不用.sync,我们想做上面的那个弹窗功能,我们也可以props传初始值,然后事件监听,实现起来也不算复杂。这里用sync实现,只是给大家提供一个思路,让其明白他的实现原理,可能有其它复杂的功能适用sync。

作者:littleTank
链接:https://www.jianshu.com/p/6b062af8cf01
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 邀请有奖 帮助中心 APP下载
官方微信

举报

0/150
提交
取消