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 sera étendu à 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!