（五）.sync修饰符

一. vue：.sync修饰符的本质

使用.sync修饰符可以进行数据在父组件与字组件间进行双向绑定，使用方法：

    <div id="app">
        <blog-post v-bind:title.sync="post.title" v-bind:content.sync="post.content"></blog-post>
    </div>
    <script type="text/javascript">
        Vue.component('blog-post', {
            props:['title', 'content'],
            template:`<div><span>{{title}}:{{content}}</span><button @click="$emit('update:content', '新内容')">更新内容</button></div>`
        });
        var app = new Vue({
            el:"#app",
            data:{
                post:{
                    title:'博客标题',
                    content:'博客内容'
                }
            }
        });
    </script>

浏览器显示：

点击按钮，博客内容发生改变。

其实，.sync修饰符是vue提供给我们的语法糖，其内部实现方法其实是这样的：
语法糖：

<blog-post v-bind:title.sync="post.title" v-bind:content.sync="post.content"></blog-post>

vue将其转化：

<blog-post v-bind:title="post.title" v-bind:content="post.content" @update:title="post.title=$event" @update:content="post.content=$event"></blog-post>

通过监听子组件的update事件，在父组件改变属性内容。

官方提醒：

注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似 v-model。