vue sync

一、使用vue cli创建工程

二、在APP.vue中：

<template>
    <div class="details">
        <myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
        <button @click="changeValue">toggle</button>
    </div>
</template>
<script> import Vue from 'vue' Vue.component('myComponent', { template: `<div v-if="show">
                    <p>默认初始值是{{show}}，因此是显示的</p>
                    <button @click.stop="closeDiv">关闭</button>
                 </div>`,
 props: ['show'], methods: { closeDiv() { this.$emit('update:show', false); //触发 input 事件，并传入新值
 } } }) export default { data() { return { valueChild: true, } }, methods: { changeValue() { this.valueChild = !this.valueChild } } } </script>

三、效果：

四、结论

sync的做用是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。