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>

지침: 코드 < ;/my-comp>는 구문 설탕인 로 확장됩니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

vue virtual dom 패치 소스 코드 분석 정보

v-vue에서 로컬 정적 이미지 메서드 로드

Vue를 사용하여 동적으로 양식을 생성하는 방법 소개

위 내용은 Vue의 .sync 수정자 사용을 이해하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!