Vue 컴포넌트를 사용하고 함수를 재사용하는 방법
- php中世界最好的语言원래의
- 2018-05-25 15:36:261337검색
이번에는 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
{
path: 'post/:postId',
name: 'post',
component: resolve => require(['./components/Post.vue'],resolve)
}기사 ID를 통해 해당 기사 페이지를 로드하는 경로입니다. 처음 액세스하면 Post.vue 컴포넌트가 마운트될 때 컴포넌트 트리로 렌더링됩니다. , 기사 ID를 통해 구성 요소가 설치되고 기사 내용을 페이지에 표시합니다. 다른 기사에 액세스하면 routing 매개변수
:postId가 변경되어 새 기사의 내용이 표시됩니다. , 하지만 역효과를 낳습니다. 기능을 포함한 구성 요소에서는 어떠한 작업도 수행하지 않습니다.그래서 우리가 최종적으로 보는 것은 원본 구성 요소의 내용입니다.
그렇다면 어떻게 원하는 효과를 얻을 수 있을까요? 아래에 효과적인 솔루션이 소개됩니다 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 컴포넌트를 사용하고 함수를 재사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!