我們知道，在vue的元件通訊props中，一般情況下，資料都是單向的，即父元件資料的更改會下傳到子元件（用了.once除外），子元件對資料無法做出更改（當傳遞的資料是引用資料型別時，可以更改父元件資料，比如，陣列的破壞性方法，push等）。在vue1.x時，提供.sync作為雙向傳遞的關鍵字，但是2.0刪除了該修飾符，但是！！2.3+又恢復了使用，採用的事件機制。下面我就簡述一下怎麼使用。

使用物件：子元件（元件名addicon）&&父元件或者根例項。

首先看子元件：

1.props宣告
首先要在子元件選項資料內宣告要傳遞的資料：
props: ['message', 'discount', 'keys', 'indexs', 'foodItem', 'cart', 'cartarray'],

data: function () {
        return {
            carts: this.cart;
        }
    },

2.html中繫結
在html屬性內動態繫結
<addicon :cart.sync="cart" ></addicon>。
3.事件釋出
子元件資料的改變必然有事件觸發，哪裡需要改變cart，就在哪裡釋出事件：

methods:{
    add:function(){
        this
 
.carts=10;
        this.$emit('update:cart',this.carts);
    }
}

再看父元件

父元件需要繫結事件監聽：

<div id="app" @update:cart="cartUpdate">
    <addicon :cart.sync="cart"></addicon>
</div>
<script>
    var vm=new vue({
        el:"#app",
        methods:{
            cartUpdate:function
 
(val){
                this.cart=val;
            }
        }

    })
</script>

如此一來，便實現了雙向繫結，子元件carts屬性接受父元件或根例項的初始資料，父元件的變動會傳遞給子元件，而子元件的carts改變時，通過事件機制，修改父元件的cart。完成了子元件carts和父元件cart的雙向對映。