vue.js에 구성요소를 도입하는 방법

vue.js에 구성 요소를 도입하는 방법: 1. 사용자 정의 구성 요소에 대한 폴더를 만듭니다. 2. 추가할 페이지에 소개할 모듈을 추가합니다. 3. index.vue에 모듈을 소개합니다. vue 페이지에 구성요소를 소개하기만 하면 됩니다.

구체적인 단계는 다음과 같습니다.

(관련 영상 추천: jquery 영상 튜토리얼)

1 먼저 프로젝트에 커스텀 컴포넌트를 배치하기 위한 폴더를 생성합니다. 아래 공통사항은 table.vue를 예로 들어 설명하겠습니다.)

2. 그런 다음 카멜 케이스 이름 지정 방법에 주의하면서 추가하려는 페이지에 소개할 모듈을 추가합니다. 테이블 모듈을 정의할 때 이름을 v-table로 정의했기 때문에 인용할 때도 테이블 모듈에 정의된 이름을 사용해야 합니다.

3. 그런 다음 index.vue에 table.vue 모듈을 추가합니다.

//index.vue 页面 ，引入v-table模块
<div class="table">
    <v-table></v-table> //这就是你引入的自定义模块；注意是驼峰命名法
</div>

4. index.vue 페이지에 구성 요소를 추가합니다(참고: table.vue, 인덱스에 모듈을 추가했습니다. HTML 태그가 아닌 vue 페이지는 실제로 Vue에 새로운 하위 구성 요소를 도입하는 것입니다.)

//index.vue
<script>
  import vTable from &#39;../../components/common/table&#39;  //table.vue（注意，我在index.vue页面中添加了模块<v-table>,不是html标签，其实就是vue引入新的子组件）
    export default {
        name: "index",
      components: {
            vTable
        },
    }
</script>

팁: 솔직하게 말하면 사용자 정의 구성 요소는 캡슐화와 유사하며 일부 공용 모듈을 추출한 다음 이를 별도의 도구 구성 요소 또는 페이지에 작성합니다. 필요한 페이지를 직접 가져오시면 됩니다.

또한, 동일한 페이지에 너무 많은 코드를 작성하여 추후 유지 관리가 불편해지는 것을 방지하기 위해 전체 페이지를 여러 개의 작은 모듈로 나눈 다음 해당 모듈을 메인 페이지에 소개할 수 있습니다. 생성 및 도입 단계는 동일합니다.

예:

관련 권장 사항: vue.js tutorial

위 내용은 vue.js에 구성요소를 도입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!