本文的目录:
1.先介绍以下.sync是什么
2.举个例子来阐述.sync的用法
3.通过上面的例子来学习一下,.sync的优点
4.不适合用.sync的情况
1.Vue中常见的修饰符有如下几个
.stop , .prevent , keypress.enter , .sync
今天我们着重来说一下.sync
1. .sync的出现
vue2.3+版之后才有的。
在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定
会带来维护上的问题,因为子组件可以变更父组件,且在父组件和子组件两侧都没有明显
的变更来源。所以下面举个父子组件的例子
以.sync为例子,举个父子组件的例子,子组件要用父组件里面的数据并且改变父组件里的数据的例子:
其中App.vue文件代码如下:
<template>
<div id="app">
App.vue我现在有{{ total }}
<hr />
<Child :money="total" v-on:update:money="total = $event" />
<!-- <Child :money.sync="total" /> -->
<!-- 以上两句等价!!!!!!! -->
</div>
</template>
\
<script>
import Child from "./Child.vue";
export default {
data() {
return { total: 10000 };
},
components: {
Child: Child,
},
};
</script>
\
<style>
#app {
border: 1px solid red;
padding: 10px;
}
</style>
\
Child.vue组件的代码如下所示:
<template>
<div class="child">
{{ money }}
<button @click="$emit('update:money', money - 100)">
<span>花钱</span>
</button>
</div>
</template>
<script>
export default {
props: ["money"],
};
</script>
<style>
.child {
border: 1px solid green;
}
</style>
其中:
<Child :money="total" v-on:update:money="total = $event" />
可简写为:
<Child :money.sync="total" />
3.这样做的好处是什么呢?
.sync 就是个语法糖,只是作为一个编译时的语法糖而存在的,会被扩展为一个自动更新父组件属性的v-on监听器。
.sync能很大程度简写一个过程:那就是,正常情况下,一个子组件改变了一个prop的值时,这个变化会同步到父组件中,如果不用.sync,要绑定,然后还要监听,比加上.sync会复杂一点。
4. .sync使用的注意事项:
注意带有 `.sync` 修饰符的 `v-bind` **不能**和表达式一起使用 (例如 `v-bind:title.sync=”doc.title + ‘!’”` 是无效的)。取而代之的是,你只能提供你想要绑定的 property 名,类似 `v-model`。
上面的例子的全部代码如下所示:
2.其他的修饰符,也比较常见的有:
@click.stop = "xxx"
@click.prevent="xxx"
@keypress.enter="xxx"
:money.sync="total"