Vue 组件 .sync 修饰符

今天看vue官网的sync修饰符有点不理解，发现这篇解决了我的疑惑，故转载一下
    

    

      

       

      
      

       

        <div id="app">
       
      

      

       

      
      

       
    
        <div>父组件bar: {{bar}}
        </div>
       
      

      

       

      
      

       
    
        <comp :foo.sync="bar">
        </comp>
       
      

      

       

      
      

       
    
        <!-- <comp :foo="bar" @update:foo="val => bar = val"></comp> -->
       
      

      

       

      
      

       

        </div>
       
      
    

    

      

       

      
      

       

        <script>
       
      

      

       

      
      

       

        Vue.component(
        'comp', {
       
      

      

       

      
      

       
  
        template: 
        '<div><button @click="increment">点我更新子组件foo++</button><div>子组件foo: {{foo}}</div></div>',
       
      

      

       

      
      

       
  
        props: [
        'foo'],
       
      

      

       

      
      

       
  
        methods: {
       
      

      

       

      
      

       
    
        increment: 
        function() {
       
      

      

       

      
      

       
      
        this.foo++;
       
      

      

       

      
      

       
      
        this.$emit(
        'update:foo', 
        this.foo);
       
      

      

       

      
      

       

            }
       
      

      

       

      
      

       

          }
       
      

      

       

      
      

       

        });
       
      

      

       

      
      

       
 
       
      

      

       

      
      

       

        new Vue({
       
      

      

       

      
      

       
  
        el: 
        '#app',
       
      

      

       

      
      

       
  
        data: {
        bar: 
        0}
       
      

      

       

      
      

       

        });
       
      

      

       

      
      

       

        </script>
       
      
    

:foo.sync="bar" 实际就是 :foo="bar" @update:foo="val => bar = val" 的语法糖

转自：https://www.jianshu.com/p/5bde35206dd0