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 的值時，這個變化也會同步到父組件中所綁定。