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: Code< -comp :foo.sync="bar"> wird erweitert zu < ; /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!