白话文-vue .sync修饰符优点|缺点---|---坚持以上原则|当子组件被多个父组件调用,每个父组件都需要加上事件

Vue数据驱动, 为保证数据可溯源, 修改数据时, 自己坚持从哪里来-在哪里修改的原则
自组件需要修改父组件传过来的值, 通过 $emit 通知父组件改值

优点	缺点
坚持以上原则	当子组件被多个父组件调用, 每个父组件都需要加上事件才能改值生效

通过 .sync, 实现在子组件直接修改父组件的值

父组件

<template>
    {{ syncData }}
    <sync-template :sync-data.sync="syncData"></sync-template>
</template>

<script>
// 引入子组件
import syncTemplate from "./Child.vue";

export default {
    components: { syncTemplate },
    data() {
        return {
            syncData: 100
        }
    },
};
</script>

子组件

<template>
    <button @click="changeFooData"></button>
</template>
<script>
export default {
    props: [ 'syncData' ],
    methods: {
        changeFooData() {
            let changeData = this.syncData - 10
            // 必须是 update:xxxxx(xxxxx为props中接收的值)
            this.$emit('update:syncData', changeData)
        }
    }
}
</script>