실제 프로젝트에서 Vue 컴포넌트 재사용을 구현하는 방법

이번에는 실제 프로젝트에서 Vue 컴포넌트를 재사용하는 방법을 보여드리겠습니다. 실제 프로젝트에서 Vue 컴포넌트를 재사용하는 방법에 대한 주의 사항은 무엇인가요?

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

2. 컴포넌트 사용

컴포넌트를 사용하려면 먼저 등록해야 합니다. 등록 방법에는 글로벌 등록과 로컬 등록이 있습니다. 2.1 글로벌 등록 후에는 모든 Vue 인스턴스를 사용할 수 있습니다. 예를 들면 다음과 같습니다.      

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

이 구성 요소를 상위 인스턴스에서 사용하려면 인스턴스가 생성되기 전에 등록해야 하며, 그런 다음 해당 구성 요소를 ＜my-comComponent>

형식으로 사용할 수 있습니다. 템플릿의 DOM 구조 요소에 포함되어야 합니다. "여기에 구성 요소의 내용이 있습니다."라고 직접 작성된 경우 "

" 없이는 렌더링되지 않습니다. (그리고 가장 바깥쪽 레이어에는 하나의 루트

태그만 있을 수 있습니다.)

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

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

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

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

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

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

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

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

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

Problem

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

- 전환 가능성 확인

- 업데이트되지 않은 구성 요소 재사용

- 새 구성 요소 활성화 및 활성화

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

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

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

기사 ID를 통해 해당 기사 페이지를 로드하는 경로입니다. 처음 액세스하면 Post.vue 컴포넌트가 마운트될 때 컴포넌트 트리로 렌더링됩니다. , 기사 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组件，这里可以根据定义的路由名称name实现，如果是，我们就可以从路由信息中获取目标文章ID来更新组件内容。

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

组件初始化

这里需要注意的是，当组件首次被挂载到组件树上时，对路由的监听是无效的，这时我们需要在生命周期钩子mounted对组件进行初始化工作：

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

写在最后

通过上面的方法就可以实现组件内容随路由参数的变化而更新了，有效解决了vue-router组件复用导致路由参数失效的问题。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue项目中watch的immediate使用

create-react-app配置eslint步骤详解

위 내용은 실제 프로젝트에서 Vue 컴포넌트 재사용을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!