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