Vue之理解.sync修饰符

·  阅读 4473

.sync 修饰符是事件绑定的语法糖。

应用场景是在父子组件传值的,且子组件要修改这个数据的时候使用。它的原理是利用EventBus,子组件触发事件,父组件响应事件并实现数据的更新,避免由子组件直接修改父组件传过来的内容。(如果子组件直接操作,vue会有警告提示)

用一个现实中的例子来说:正常来说,钱都是在父亲身上的,儿子要用钱是告诉父亲要用钱,然后父亲从身上拿出钱给儿子使用。如果说子组件直接操作父父组件传过来的值,等同于儿子没经过通知父亲这一步就拿钱用了,这等于是偷钱,不合理的。

其实父子组件传值的过程等同于是父亲告诉儿子,我有这么些个钱可以用,不是让子组件直接操作这个值。你要用多少,告诉我,然后把用完后会剩余多少告诉我就可以了。

搞清楚了这个逻辑,那么来看一个例子:

child.vue(子组件)

<template>
  <div class="child">
    {{money}}
    <!-- 我要用100 -->
    <button @click="$emit('update:money', money-100)">
      <span>花钱</span>
    </button>
  </div>
</template>

<script>
export default {
  props: ["money"]
};
</script>

<style>
.child {
  border: 3px solid green;
}
</style>
复制代码

parent.vue(父组件)

<template>
  <div class="app">
    App.vue 我现在有 {{total}}
    <hr>
    <!-- 语法糖式写法 -->
    <!-- <Child :money.sync="total"/> -->
    <Child :money="total" v-on:update:money="total = $event"/>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return { total: 10000 };
  },
  components: { Child: Child }
};
</script>

<style>
.app {
  border: 3px solid red;
  padding: 10px;
}
</style>
复制代码

这个代码就是上述内容的解释,实现的原理是利用eventBus,在子组件使用$emit('update:money', money-100) 来通知父组件去响应,而父组件则通过$event 来接收经过子组件修改后的值。

注意v-on:update:money这里事件必须写为update:mondyupdate是vue规定的语法书写格式,money是被绑定事件的属性。正式这样的规定使

<Child :money="total" v-on:update:money="total = $event"/>
复制代码

这么长的语句得以缩写为:

 <Child :money.sync="total"/>
复制代码

而子组件内也必须用'update:money'事件名去触发响应

<button @click="$emit('update:money', money-100)">
复制代码

vue文档-.sync

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改