Comment comprendre l'utilisation du modificateur .sync de Vue

Cet article présente principalement comment comprendre l'utilisation du modificateur .sync de Vue. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

Cet article présente l'utilisation du modificateur .sync de Vue, partagez-le avec tout le monde et laissez une note pour vous-même

Cas

<p id="app">
  <p>{{bar}}</p>
  <my-comp :foo.sync="bar"></my-comp>
  <!-- <my-comp :foo="bar" @update:foo="val => bar = val"></my-comp> -->
</p>
<script>
  Vue.component(&#39;my-comp&#39;, {
    template: &#39;<p @click="increment">点我+1</p>&#39;,
    data: function() {
      return {copyFoo: this.foo}
    },
    props: [&#39;foo&#39;],
    methods: {
      increment: function() {
        this.$emit(&#39;update:foo&#39;, ++this.copyFoo);
      }
    }
  });
  new Vue({
    el: &#39;#app&#39;,
    data: {bar: 0}
  });
</script>

Description : Code e9f3bed373e620f9af0076d8ccc763460337b061791f03922305036e30242818 sera étendu à d1e856a878a584fd29485ade05c8185f bar = val"> ;f939a29b40f7380e5948c73965a66a8e est du sucre syntaxique.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de l'analyse du code source du correctif Vue Virtual Dom

v-for in vue charge des images statiques locales Méthode

Introduction à l'utilisation de Vue pour générer dynamiquement des formulaires

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!