vue2修饰符.sync 实现父子组件数据双向绑定

使用场景

        你希望在子组件中修改父组件传过来的值，并同步到父组件

写法示例

        父组件

<template>
    <div>
        <Son :showVal.sync="val"></Son>
    </div>
</template>
<script>
import Son from './son.vue'
export default {
    components: {
        Son
    },

    data() {
        return {
            val: 1
        }
    },
}
</script>

        子组件

<template>
    <div>子组件</div>
    <h1>{{ showVal }}</h1>
    <button @click="setShowVal">点我改变showVal</button>
</template>
<script>
export default {

    props: {
        showVal: {
            type: Number,
        },
    },
    methods: {
        setShowVal() {
            // 这里将改变props里的showVal值且同步到父组件
            this.$emit('update:showVal', 100)
        }
    }
}
</script>

        效果

        点击前

        点击后