Vue 컴포넌트를 사용하고 함수를 재사용하는 방법

이번에는 Vue 컴포넌트 사용 방법 및 재사용 기능에 대해 설명하고, Vue 컴포넌트 사용 및 재사용 기능 시 주의사항은 무엇인지 알아보겠습니다.

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

2. 컴포넌트 사용

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

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

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

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

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

    <p id="app3">
      <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를 통해 구성 요소가 설치되고 기사 내용을 페이지에 표시합니다. 다른 기사에 액세스하면

routing 매개변수

: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中文网其它相关文章！

推荐阅读：

怎么解决Angular5升级RxJS到5.5.3报错问题

使用vue技术容易忽略的7个点

위 내용은 Vue 컴포넌트를 사용하고 함수를 재사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!