vue组件中的.sync修饰符使用

我们知道，在vue的组件通信props中，一般情况下，数据都是单向的，即父组件数据的更改会下传到子组件（用了.once除外），子组件对数据无法做出更改（当传递的数据是引用数据类型时，可以更改父组件数据，比如，数组的破坏性方法，push等）。在vue1.x时，提供.sync作为双向传递的关键字，但是2.0删除了该修饰符，但是！！2.3+又恢复了使用，采用的事件机制。下面我就简述一下怎么使用。

使用对象：子组件（组件名addicon）&&父组件或者根实例。

首先看子组件：

1.props声明
首先要在子组件选项数据内声明要传递的数据：
props: ['message', 'discount', 'keys', 'indexs', 'foodItem', 'cart', 'cartarray'],（我们只拿cart做实验）。
同时给子组件一个自己的属性：

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

2.html中绑定
在html属性内动态绑定
。
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的双向映射。