vue.js의 구성 요소 데이터 흐름 문제에 대한 솔루션

이 글은 주로 vue.js 구성 요소의 데이터 흐름에 대한 문제를 소개합니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 여러분에게 공유하고 참고할 것입니다. 에디터를 따라가서 살펴보겠습니다

1. 컴포넌트

컴포넌트는 현대 프론트엔드 프레임워크의 필수적인 부분이라고 할 수 있습니다. 컴포넌트를 사용하면 코드 재사용률과 개발자의 개발 효율성이 크게 향상될 뿐만 아니라 향후 코드 유지 관리에도 큰 의미가 있습니다. 프론트엔드 개발에서는 역사적인 이유로 인해 WebComponent는 사용하기 쉽지만 많은 새로운 프론트엔드 기술과 마찬가지로 개발이 크게 제한되어 있습니다. 이러한 상황을 바탕으로 현명한 개발자는 프레임워크 내에 해당 기능을 통합하여 구성 요소화를 완료하려고 합니다. 현대의 다양한 프런트엔드 프레임워크에는 기본적으로 자체 구현이 있습니다. 여기서는 데이터 흐름에 중점을 두고 vue의 구성 요소를 분석합니다.

2. Vue 구성 요소

Vue 구성 요소는 템플릿을 만들 때 일반적인 HTML을 기반으로 하기 때문에 jsx, 핸들바 등 특별한 구문을 배울 필요가 없으므로 상대적으로 학습 비용이 저렴합니다. 더 쉽게 시작해보세요. Vue 컴포넌트를 사용할 때 일반적으로 컴포넌트 등록과 컴포넌트 호출의 두 부분으로 나뉩니다.

(1) 컴포넌트 등록

Vue.component('pop-box', {
  template:  &#39;<p class="component-box">\
    <p class="component-content">\
    ..........
    </p>\
  </p>&#39;,

  props: [...],

  data: function () {
    return ...;
  },

  methods: {
    ...
  },

  mounted () {
    ...
  },

  ...
});

Vue.comComponent 메소드를 사용하면 전역적으로 사용 가능한 컴포넌트를 쉽게 생성할 수 있습니다. 물론 인스턴스나 컴포넌트 내에 로컬 컴포넌트를 등록할 수도 있지만 원칙은 비슷합니다. . Vue.comComponent의 첫 번째 매개변수는 구성 요소의 이름이거나 후속 호출에서 이 이름을 사용하여 이를 호출합니다. 두 번째 매개변수는 일반적으로 템플릿(템플릿), 구성 요소 키를 포함하는 개체입니다. 데이터(데이터, 계산됨), 메소드(메서드), 후크 기능(생성, 마운트...)과 같은 정보가 내부에 유지됩니다.

다음에 주목할 가치가 있습니다.

1. 구성 요소의 데이터는 함수여야 하며 해당 반환 값은 실제 "데이터"로 사용됩니다.

2. vue1.x 및 vue2의 후크 함수. x는 약간 다릅니다. Hook 기능이 적용되지 않는 경우 vue 버전을 확인하는 것을 잊지 마세요.

(2) 컴포넌트 호출

(1) 시작 태그 + 끝 태그 모드

<pop-box text="200" v-bind:number="200"></pop-box>

(2) 끝 태그 없음 모드

<pop-box text="200" v-bind:number="200" />

vue 컴포넌트 호출에는 위의 두 가지 모드가 있습니다. 실제로 슬롯을 사용하지 않는 경우에는 두 모드 사이에 차이가 없지만, 슬롯을 사용해야 하는 경우에는 시작 태그와 종료 태그가 모두 포함된 모드만 사용할 수 있습니다.

위의 데이터를 바인딩할 때 property="value" 형식이 직접 사용된다는 점에 유의할 필요가 있습니다. 값이 숫자인지 문자열인지에 관계없이 속성은 결국 문자열 유형입니다. 숫자 유형이 되도록 하려면 v-bind:property="value" 형식을 사용하거나 :property="value"로 축약합니다.

3. Vue 구성 요소 데이터 흐름

vue는 일반적인 단방향 데이터 흐름 원칙을 따릅니다. 즉, 데이터는 항상 상위 구성 요소에서 하위 구성 요소로 전달되며 하위 구성 요소는 자체 데이터 흐름을 가질 수 있습니다. 그러나 개발자가 이를 시도하면 Vue는 오류를 보고합니다. 이것의 장점은 여러 하위 구성 요소가 상위 구성 요소의 상태를 수정하려고 시도하는 것을 방지하여 이 동작을 추적하기 어렵게 만드는 것입니다. vue의 구체적인 구현 방법은 다음과 같습니다.

부모 컴포넌트는 props를 바인딩하여 자식 컴포넌트에 데이터를 전달하지만 자식 컴포넌트 자체에는 이러한 데이터를 수정할 권한이 없습니다. , 이 하나만 수정할 수 있습니다. 동작은 이벤트를 통해 상위 구성 요소에 보고되며 상위 구성 요소 자체가 데이터 처리 방법을 결정합니다.

(1) 간단한 예

<p id="app">
  <my-counter @inc="increase" :counter="counter"></my-counter>
</p>
...
Vue.component(&#39;my-counter&#39;, {
  template:  &#39;<p class="counter">\
    <p>{{counter}}</p>\
    <button @click="inc">increase</button>\
  </p>&#39;,

  props: [&#39;counter&#39;],

  methods: {
    inc: function () {
      this.$emit(&#39;inc&#39;);
    }
  }
});

var app = new Vue({
  el: &#39;#app&#39;,
  data: {
    counter: 0
  },
  methods: {
    increase () {
      this.counter ++;
    }
  }
});

더 간단하게 하기 위해 하나의 my-counter 구성 요소만 하위 구성 요소로 생성됩니다. vue 인스턴스를 상위 구성 요소로 간주할 수 있습니다.

(2) 데이터 흐름 분석

(1) 상위 구성 요소에 counter라는 데이터를 정의합니다.
(2) 구성 요소를 호출할 때 :counter="counter";를 통해 상위 구성 요소의 카운터를 하위 구성 요소에 전달합니다. 3) 하위 구성 요소는 카운터를 읽고 이를 템플릿에 표시합니다.
(4) 사용자가 버튼을 클릭하면 카운터가 증가해야 합니다.
(5) 하위 구성 요소는 이 이벤트를 수신하지만 직접 수정하지는 않습니다. 대신 this.$emit('inc');를 사용하여 사용자 정의 이벤트 형식으로 상위 구성 요소에 추가해야 하는 이벤트를 보고합니다. @inc="increase" 는 하위 구성 요소에서 보고된 이벤트를 모니터링하고 자체 증가 방법으로 카운터를 늘릴 수 있습니다.
(7) 상위 구성 요소의 데이터가 업데이트되면 하위 구성 요소의 데이터가 업데이트됩니다. 자동으로 업데이트되고 동시에 인터페이스 콘텐츠도 업데이트됩니다. 이 프로세스는 프레임워크에 의해 자동으로 완료됩니다.

(3) 요약

위의 예는 기본적으로 vue의 주요 데이터 흐름 방향을 완벽하게 보여주지만, 이 prop/evnet 기반 방법은 직접적인 부모-자식 관계를 갖는 컴포넌트, 형제 컴포넌트 또는 많은 수의 구성요소의 데이터 흐름이 이 방법을 기반으로 하는 경우 매우 번거로울 수 있습니다. 이때 보다 강력한 상태 관리 모델을 사용하는 것을 고려할 수 있습니다.

위 내용은 vue.js의 구성 요소 데이터 흐름 문제에 대한 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!