How to understand the use of Vue's .sync modifier

This article introduces the use of Vue's .sync modifier, share it with everyone, and leave a note for yourself

Case

&lt;div &gt;
  &lt;div&gt;{{bar}}&lt;/div&gt;
  &lt;my-comp :="bar"&gt;&lt;/my-comp&gt;
  &lt;!-- &lt;my-comp :foo="bar" @update:foo="val =&gt; bar = val"&gt;&lt;/my-comp&gt; --&gt;
&lt;/div&gt;
&lt;script&gt;
  ('my-comp', {
    template: '&lt;div @click="increment"&gt;Click me+1&lt;/div&gt;',
    data: function() {
      return {copyFoo: }
    },
    props: ['foo'],
    methods: {
      increment: function() {
        this.$emit('update:foo', ++);
      }
    }
  });
  new Vue({
    el: '#app',
    data: {bar: 0}
  });
&lt;/script&gt;

Note: The code <my-comp :="bar"></my-comp> will be expanded to <comp :foo="bar" @update:foo="val => bar = val"></comp>, which is a syntactic sugar.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.