집 > 기사 > 웹 프론트엔드 > Vue 구성 요소 및 재사용에 대한 자세한 설명

Vue 구성 요소 및 재사용에 대한 자세한 설명

亚连원래의: 2018-05-26 09:46:291357검색

Component는 Vue.js의 가장 강력한 기능 중 하나입니다. 구성 요소는 HTML 요소를 확장하여 재사용 가능한 코드를 캡슐화할 수 있습니다. 이번 글은 주로 Vue 컴포넌트에 대한 소개와 재사용이 필요한 친구들이 참고하면 됩니다

1. 컴포넌트란

컴포넌트(Component)는 Vue.js의 가장 강력한 기능 중 하나입니다. 구성 요소는 HTML 요소를 확장하여 재사용 가능한 코드를 캡슐화할 수 있습니다.

2. 컴포넌트 사용

컴포넌트를 사용하려면 먼저 등록해야 합니다. 등록 방법에는 글로벌 등록과 로컬 등록이 있습니다.

2.1 글로벌 등록 후에는 모든 Vue 인스턴스를 사용할 수 있습니다. 예:

 <p id="app1">
      <my-component></my-component>
    </p>
Vue.component(&#39;my-component&#39;,{
  template: &#39;<p>这里是组件的内容</p>&#39;
});
var app1 = new Vue({
  el: &#39;#app1&#39;
});

이 구성 요소를 상위 인스턴스에서 사용하려면 인스턴스가 생성되기 전에 먼저 등록해야 하며, 이후 8c051e1d9725cc4480b6d46cca4bf28a

템플릿의 DOM 구조는 요소에 포함되어야 합니다. "여기에 컴포넌트의 내용이 있습니다."라고 직접 작성하면 "e388a4556c0f65e1904146cc1a846bee" 없이는 렌더링되지 않습니다. . (그리고 가장 바깥쪽 레이어에는 하나의 루트 e388a4556c0f65e1904146cc1a846bee 태그만 있을 수 있습니다.)

2.2 Vue 인스턴스에서는 구성 요소 옵션을 사용하여 구성 요소를 로컬로 등록할 수 있습니다. 등록된 구성 요소는 인스턴스 범위 내에서만 유효합니다. 예:

    <p id="app2">
      <my-component1></my-component1>
    </p>
var app2 = new Vue({
  el: &#39;#app2&#39;,
  components:{
   &#39;my-component1&#39;: {
     template: &#39;<p>这里是局部注册组件的内容</p>&#39;
   }
  }
});

2.3 데이터는 함수여야 합니다

템플릿 옵션 외에도 구성 요소는 데이터, 계산, 메서드 등과 같은 Vue 인스턴스와 같은 다른 옵션을 사용할 수도 있습니다. 하지만 데이터를 사용하는 경우에는 예제와 약간 다릅니다. 데이터는 함수여야 하며 데이터가 반환됩니다.

    <p id="app3">
      <my-component3></my-component3>
    </p>
Vue.component(&#39;my-component3&#39;,{
  template: &#39;<p>{{message}}</p>&#39;,
  data: function(){
    return {
      message: &#39;组件内容&#39;
    }
  }
});
var app3 = new Vue({
  el: &#39;#app3&#39;
});

일반적으로 반환된 개체는 외부 개체를 참조해서는 안 됩니다. 반환된 개체가 외부 개체를 참조하는 경우 이 개체가 공유되고 양쪽 당사자의 수정 사항이 동기화되기 때문입니다.

따라서 일반적으로 새로운 독립 데이터 개체가 구성 요소에 반환됩니다.

보충: vue-router 구성 요소 재사용 문제

구성 요소 시스템은 Vue의 중요한 부분입니다. 구성 요소를 결합하여 여러 개의 작고 독립적이며 재사용 가능한 구성 요소로 분해할 수 있습니다. Vue-router의 라우팅 기능은 각 컴포넌트를 해당 경로에 매핑하는 데 사용됩니다. 라우팅 변경을 통해 Vue는 이를 렌더링할 위치를 알려주고 각 컴포넌트와 각 페이지 간의 점프 탐색이 실현됩니다.

Problem

vue-router를 사용하여 경로를 전환하면 구성 요소 트리 업데이트가 트리거되고 정의된 경로를 기반으로 새 구성 요소 트리가 렌더링됩니다. 대략적인 전환 프로세스는 다음과 같습니다.

- 비활성화 및 불필요한 구성 요소 제거
- 전환 가능성 확인
- 업데이트되지 않은 구성 요소 재사용
- 새 구성 요소 활성화 및 활성화

특정 라우팅 전환 제어 프로세스에 대한 공식 문서를 참조하세요: Switching Control Pipeline

vue는 어떻게 수행합니까? -라우터 심사위원 특정 컴포넌트를 재사용할 수 있나요? 다음 라우팅 구성을 살펴보겠습니다.

{
  path: &#39;post/:postId&#39;,
  name: &#39;post&#39;,
  component: resolve => require([&#39;./components/Post.vue&#39;],resolve)
}

처음 접속 시 Post.vue 컴포넌트가 해당 컴포넌트에 렌더링되어 기사 ID를 통해 해당 기사 페이지를 로드하는 경로입니다. 기사 ID를 통해 기사 콘텐츠를 가져와서 페이지에 표시하면 다른 기사에 액세스할 때 라우팅 매개변수 postId가 우리의 기대에 따라 변경됩니다. 기사가 표시되어야 하지만 역효과를 낳습니다.

우리가 보는 것은 여전히 이전 기사입니다. 라우팅 매개변수가 변경되었지만 vue-router는 이 구성 요소가 이전에 렌더링되었으므로 이전 구성 요소를 직접 재사용한다고 생각합니다. 탑재와 같은 수명주기 기능을 포함하여 구성 요소에서 어떠한 작업도 수행하지 않습니다.

그래서 우리가 최종적으로 보는 것은 원본 구성 요소의 내용입니다.

그렇다면 어떻게 원하는 효과를 얻을 수 있을까요? 아래에 효과적인 솔루션이 소개됩니다

Solution

감시 리스너를 사용하여 라우팅 변경 사항을 모니터링하고 라우팅 매개 변수 변경 사항에 따라 해당 데이터에 응답할 수 있습니다.

정의합니다. 데이터 획득 방법

먼저 기사를 획득하는 방법을 정의하고, 기사 ID를 기반으로 백그라운드에서 해당 기사 정보를 획득합니다.

methods: {
  getPost(postId) {
    this.$http.get(`/post/get_post/${postId}`).then((response) => {
      if(response.data.code === 0){
        this.post = response.data.post;
      }
    });
  }
}

경로 듣기

다음 단계는 경로가 전환될 때 대상 구성 요소가 Post.vue 구성 요소인지 확인하는 것입니다. 이는 정의된 경로 이름 이름을 기반으로 구현할 수 있습니다. 따라서 라우팅 정보에서 이를 얻을 수 있습니다. 대상 기사 ID를 가져와 구성 요소 콘텐츠를 업데이트합니다.

watch: {
  &#39;$route&#39; (to, from) {
    if(to.name === &#39;post&#39;){
      this.getPost(to.params.postId);
    }
  }
}

컴포넌트 초기화

여기서 주목해야 할 점은 컴포넌트가 컴포넌트 트리에 처음 마운트되면 라우팅 모니터링이 유효하지 않다는 점입니다. 라이프 사이클 후크에서 초기화 작업 수행:

mounted() {
  this.getPost(this.$route.params.postId);
}

Written at the end

위의 방법을 통해 라우팅 매개변수가 변경되면 구성 요소 내용을 업데이트할 수 있어 잘못된 라우팅 문제를 효과적으로 해결할 수 있습니다. vue-router 구성 요소의 재사용으로 인해 발생하는 매개 변수입니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Vue 구성 요소 및 재사용에 대한 자세한 설명

관련 기사