vue 修饰符sync的功能是：当一个子组件改变了一个 props的值时，这个变化也会同步到父组件中所绑定。 通俗的说：.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。
vue规则：
1.组件不能修改外部数据
2.this.$emit可以突发事件，并传参
3.e v e n t 可以获取 event可以获取event可以获取emit的参数
举列子说明:爸爸给儿子钱,儿子要花钱怎么办?
答:儿子打电话(触发事件)向爸爸要钱
父组件
<template>
<div class="app">
父组件 我现在有 {{total}}
<hr>
<Child :money="total" v-on:useMoney="total = $event"/> //第一种写法
//先是绑定属性money等于total变量,也就是告诉儿子有多少钱
//然后绑定useMoney事件,发现儿子触发useMoney这个事件,通过$event拿到这个值
<Child :money="total" v-on:updated:money="total = $event"/>//第一种写法,改为updated:money
<Child :money.sync="total"/> //第三种写法:.sync修饰符
//.sync代替了v-on:updated:money="total = $event"
//$event是$emit从子组件传出来的值
</div>
</template>
<script>
import Child from "./Child.vue"; //引入儿子的组件
export default {
data() {
return { total: 10000 };
},
components: { Child: Child } //这里可以缩写为一个Child
};
</script>
<style>
.app {
border: 3px solid red;
padding: 10px;
}
</style>
子组件
<template>
<div class="child">
子组件 {{money}}
<button @click="$emit('useMoney', money-100)"> //第一种写法
<button @click="$emit('update:money', money-100)"> //第二种将useMoney改为updated:money
<span>花钱</span>
</button>
</div>
</template>
<script>
export default {
props: ["money"] //引入一个外部变量
};
</script>
<style>
.child {
border: 3px solid green;
}
</style>
:money.sync = “total” === :money = “total” v-on:update:money = “total
= $event”
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/137349.html
