누구나 Vue 프로젝트를 작성할 때 다양한 컴포넌트 이름을 접하게 될 것입니다. 다음에는 이 글을 통해 Vue 컴포넌트 이름의 기능을 요약해서 공유하겠습니다. 관심 있는 친구들은 함께 살펴보세요
프로젝트에서 구성 요소 이름을 지정할 때
여기서 이름은 필요하지 않지만 실제로는 꽤 많은 용도로 사용됩니다
export default { name:'xxx' }
1. , 캐시 필터링을 수행하는 구성 요소 이름과 함께 사용할 수 있습니다.
예를 들면 다음과 같습니다.
DOM이 로드된 후 마운트된 후크 기능에 데이터를 로드합니다.
export default { name:'Detail' }, mounted(){ this.getInfo(); }, methods:{ getInfo(){ axios.get('/xx/detail.json',{ params:{ id:this.$route.params.id } }).then(this.getInfoSucc) } }
Keep-alive를 사용하면 두 번째로 페이지를 입력할 때 페이지가 다시 요청되지 않습니다. 즉, 탑재된 기능이 트리거됩니다.
두 가지 해결책이 있습니다. 하나는 activate() 함수를 추가하고 새 페이지에 들어갈 때마다 데이터를 얻는 것입니다.
또 다른 해결책은 아래 그림과 같이 keep-alive에 필터를 추가하는 것입니다.
<p id="app"> <keep-alive exclude="Detail"> <router-view/> </keep-alive> </p>
2 DOM이 재귀 구성 요소로 사용되는 경우
예를 들어 다음 목록이 있습니다. Detail.vue 구성 요소. vue 하위 구성 요소는 재귀적으로 반복할 때 자체 이름을 호출해야 합니다.
vue-devtools 디버깅 도구에 표시되는 그룹 이름은 vue
에 있는 구성 요소 이름에 따라 결정됩니다. 위 내용은 전체 내용입니다. 이 글이 모든 분들의 학습에 도움이 되기를 바랍니다. 자세한 내용은 PHP 중국어 홈페이지를 참고해주세요! 관련 권장 사항: 단일 Vue 구성 요소의 무한 수준 다중 선택 메뉴 기능 소개
Vue를 사용하여 숫자 키보드 구성 요소를 사용자 정의하는 방법
위 내용은 Vue 구성 요소 이름 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!