.sync的使用

.sync的使用

在.sync出现之前，要想实现子组件修改父组件的属性的值，需要通过如下代码：

<div id="app">
		<parent :title="title" @test1="title = $event" ></parent>
    </div>
    
    <script>
        
        var parent = {
            template:`
            <div>
                <div>-------------------</div>
                <div @click="$emit('test1','title2')">parent</div>
            </div>
            `,
        }

        new Vue({
            el:'#app',
            data:{
                title:'title1'
            },
            components:{
                parent,
            },
        })

    </script>

上面代码，通过子组件修改属性title的值由title1-->title2;

而.sync出现后，简化了代码
将上面代码对应修改为如下：

<parent :title.sync="title" ></parent>

 <div @click="$emit('update:title','title2')">parent</div>

效果相同

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

官方还给出：
当我们用一个对象同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使用：

举例说明：

<div id="app">
		<parent :title.sync="title1" ></parent>
    </div>
    
    <script>
        
        var parent = {
            props:['title'],
            data:function(){
                return {
                    title2:{
                        test11:'修改后 test11',
                        test22:'修改后 test22'
                    }
                }
            },
            template:`
            <div>
                <div>-------------------</div>
                <div @click="$emit('update:title',title2)">parent</div>
                <div>{{title.test11}}</div>
            </div>
            `,
        }

        new Vue({
            el:'#app',
            data:{
                title1:{
                    test11:'修改前 test11',
                    test22:'修改前 test22'
                }
            },
            components:{
                parent,
            },
            
        })

    </script>

当点击页面上parent字体的时候：
‘’修改前 test11‘’变为‘修改后 test11’