VUE3 개발 기본 사항: Vue.js 템플릿을 사용하여 다른 템플릿 참조

Vue.js 개발에서는 템플릿을 사용하는 것이 매우 일반적인 관행입니다. 하나의 템플릿에서 다른 템플릿을 참조해야 할 경우 어떻게 해야 합니까? 이 글에서는 Vue.js 템플릿을 사용하여 다른 템플릿을 참조하는 방법을 소개합니다.

Vue.js에서는 태그를 사용하여 템플릿을 정의할 수 있습니다. 템플릿 파일에서는 각각 고유한 이름을 가진 여러 템플릿을 정의할 수 있습니다. 템플릿에서 다른 템플릿을 참조해야 하는 경우 태그의 name 속성을 사용하여 참조해야 하는 템플릿의 이름을 지정하면 됩니다.

header.vue와 footer.vue라는 두 개의 템플릿 파일이 있다고 가정합니다. header.vue 파일은 웹사이트의 헤드 네비게이션 바를 정의하고, footer.vue 파일은 웹사이트 하단의 저작권 정보를 정의합니다. 웹사이트의 기본 템플릿에서 이 두 템플릿 파일을 참조하고 싶은데 어떻게 해야 합니까?

먼저 기본 템플릿 파일에서 이 두 템플릿 파일을 참조해야 합니다. 이 두 파일은 import 문을 사용하여 도입할 수 있습니다.

import Header from './header.vue' import Footer from './footer.vue'

export default { name: 'MainTemplate', components: { Header, Footer } } 로그인 후 복사 위 코드에서는 import 문을 사용하여 header.vue 및 footer.vue 파일을 도입하고 이 두 구성 요소를 구성 요소 속성에 등록합니다. 이러한 방식으로 템플릿의 및 태그를 사용하여 이 두 구성요소를 참조할 수 있습니다.

다음으로 header.vue 및 footer.vue 파일에 구성 요소의 템플릿을 정의합니다.

header.vue 파일의 코드는 다음과 같습니다.

Header Home About Contact 로그인 후 복사 header.vue 파일에서 제목과 세 개의 탐색 링크가 포함된 헤더 탐색 모음을 정의합니다.

footer.vue 파일의 코드는 다음과 같습니다.

요약

Vue.js 개발에서는 템플릿을 사용하는 것이 일반적인 관행입니다. 템플릿에서 다른 템플릿을 참조해야 하는 경우 태그의 name 속성을 사용하여 참조해야 하는 템플릿의 이름을 지정할 수 있습니다. 기본 템플릿 파일에서 import 문을 사용하여 다른 템플릿 파일을 소개하고 이러한 구성 요소를 구성 요소 속성에 등록할 수 있습니다. 참조된 템플릿 파일에서 자체 템플릿을 정의할 수 있습니다.