vue 사용자 정의 구성 요소(Vue.use()를 통 해 사용)즉 install 의 용법 설명

vue 프로젝트 에서 저 희 는 구성 요 소 를 사용자 정의 할 수 있 습 니 다.element-ui 처럼 Vue.use()방법 으로 사용 할 수 있 습 니 다.구체 적 인 실현 방법:
1.먼저 Cmponent.vue 파일 을 새로 만 듭 니 다.

// Cmponent.vue
<template>
  <div>
        
  </div>
</template>
 
<script>
  export default {
 
  }
</script>
 
<style scoped>
  div{
    font-size:40px;
    color:#fbb;
    text-align:center;
  }
</style>
2.같은 디 렉 터 리 에 index.js 파일 을 만 들 고 이 파일 에서 인 스타 그램 방법 으로 구성 요 소 를 전역 적 으로 등록 합 니 다.

import component from './Cmponent.vue'
const component = {
  install:function(Vue){
    Vue.component('component-name',component)
  } //'component-name'               ,install        
  
}
//      
export default component
3.사용

//    index.js    install  ,      ui     ,  Vue.use()     
import loading from './index.js'
Vue.use(loading)
<template>
  <div>
   <component-name></component-name>
  </div>  
</template>
추가 지식:vue 프로젝트 에서 구성 요 소 를 사용자 정의 하고 다른 파일 에서 참조 하 는 방법 은 무엇 입 니까?
1.실행 환경:
컴 파일 러:Visual Studio 코드
Vue 버 전:2.9.6
vue-cli 가 만 든 프로젝트 디 렉 터 리 트 리 아래
2.vue 구성 요소 사용자 정의
사용자 정의 구성 요 소 를 저장 하기 위해 src 디 렉 터 리 에 components 디 렉 터 리 를 새로 만 듭 니 다.

사용자 정의 구성 을 저장 할 디 렉 터 리 만 들 기
vue 파일 을 새로 만 들 고 다음 내용 을 작성 합 니 다(HelloWorld 를 예 로 들 면).

여기 export default 내용 의 name 속성 값 은 사용자 정의 구성 요소 이름 입 니 다.template 태그 이름 의 내용 은 html 태그 로 구 성 된 집합 입 니 다.script 태그 에는 javascript 코드 가 동적 효 과 를 정의 합 니 다.style 태그 의 내용 은 구성 요소 의 css 스타일 입 니 다.
vue 구성 요소 도입

이 구성 요소 가 도입 한 문 구 는 import HelloWorld from"@/coponents/HelloWorld"입 니 다.에 자리잡다,...
vue 프로젝트 에 사용자 정의 탭를 도입 합 니 다.

마지막 실행 효과:

I am Hello World Component
여기 가 정 의 된 구성 요소 내용 입 니 다.
위의 vue 사용자 정의 구성 요소(Vue.use()를 통 해 사용)즉,인 스타 그램 의 용법 설명 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 많이 응원 해 주시 기 바 랍 니 다.

좋은 웹페이지 즐겨찾기