Vue の .sync 修飾子の使用を理解する方法

この記事は主に Vue の .sync モディファイアの使用方法を紹介するもので、内容が非常に優れているので、参考として共有します。

この記事では、Vue の .sync 修飾子の使用方法を紹介し、みんなで共有し、自分用にメモを残します

Case

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

手順: コード e9f3bed373e620f9af0076d8ccc7634687fe1f04e202cf55e7bd7d6b1bac26fa は、糖衣構文である d1e856a878a584fd29485ade05c8185f bar = val">f939a29b40f7380e5948c73965a66a8e に展開されます。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

vue 仮想 dom パッチのソース コード分析について

v-vue でローカル静的画像メソッドをロードするための

Vue を使用して動的にフォームを生成する方法の紹介

以上がVue の .sync 修飾子の使用を理解する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。