So verstehen Sie die Verwendung des .sync-Modifikators von Vue

In diesem Artikel wird hauptsächlich erläutert, wie Sie die Verwendung des .sync-Modifikators von Vue verstehen. Ich werde ihn jetzt als Referenz verwenden.

Dieser Artikel stellt die Verwendung des .sync-Modifikators von Vue vor, teile ihn mit allen und hinterlasse eine Notiz für dich selbst

Fall

<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>

Anleitung: Codefd24f4baa5fdb4c7c165a478be197d9e0337b061791f03922305036e30242818 wird erweitert zu d1e856a878a584fd29485ade05c8185f bar = val">< ; /comp> ist nur syntaktischer Zucker.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Über die Quellcode-Analyse des virtuellen Dom-Patches von Vue

v-for in Vue lädt lokale statische Bilder Methode

Einführung in die Verwendung von Vue zur dynamischen Generierung von Formularen

Das obige ist der detaillierte Inhalt vonSo verstehen Sie die Verwendung des .sync-Modifikators von Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!