뷰 컴포넌트 패키지 (버튼 조립체 예에 패키지)

구성 요소 파일을 파일 1은 어떤 조건에 따라 무엇을 표시, 구성 요소 이름, HTML 태그의 바닥의 응용 프로그램을 포함하는 프로토 타입 (이다 index.vue 파일에 기록 파일 index.vue에서 파일을 만들고, 버튼 만들기 / 함수) 보낸 데이터 객체 파일에있다.

1 <템플릿>
 2      <DIV : 클래스 = "유형 == '기본' '기본 BTN': 형식 == '주' '차 BTN': 형식 == '위험' '위험 BTN'? 'BTN 기본 ' ">
 3          <슬롯> </ 슬롯>
 4      </ DIV>
 5 </ 템플릿>
 6  
7 <script>
 8 수출 기본 {
 9      이름 :"골목 버튼 " ,
 10 개      소품 : {
 11          유형 : {
 12              유형 : 문자열,
 13              기본 : "기본"
14          }
 15      }
 16  }
 17 </ script>
18  
19  
20 <스타일>
 21      .btn {
 22           폭 : 100 픽셀;
23           신장 40px;
24           색상 : #fff;
25           텍스트 - 정렬 : 센터;
26           라인 - 신장 40px;
27      }
 28      . 기본 {
 29         
(30)          배경 : 빨간색;
31         
32      }
 33  
34       .primary {
 35        
(36)          배경 : 옐로우;
37      }
 38  
39       연구 해봐 {
 40      
41          배경 : #ccc;
42      }
 43 </ 스타일>

2 /하는 index.js는 레지스터 파일에 새 건물 요소의 이름을 파일 버튼에서 파일을 만들 수 있습니다.

1 개 "./index.vue"에서 가져 오기 버튼 ;
2  
3   Button.install = (뷰) => {
 4      Vue.component (Button.name, 버튼)
 (5)  }
 (6)  
(7) 반출 디폴트 버튼;

3 /와, 피어 파일 버튼하는 index.js 파일을 설정하여 구성 요소를 등록뿐만 아니라 레지스터에 설치, 수출 만 세계로 연결뿐만 아니라 하나의 리드는 로컬 또는 글로벌 참조를 용이하게 할 수 있습니다.

. (1) 오기 "./button"버튼으로부터
 2  . 3 . 4   CONST 부품 = [
 . 5      버튼
 . 6 ]
 . 7 . 8 . 9 // VUE. 때 사용, 당신은 설치 방법이 있어야합니다. 매개 변수는 VUE입니다. 10   CONST 설치 = (뷰) => {
 . 11 대 ( VAR의 키 의 구성) {
 12이다          Vue.component (구성 요소 [키] .name과는 구성하는 열쇠)
 13이다      }
 14 }
 15 16 . 17   수출 기본적       
           {
 18       , 설치
 19       버튼
 (20)   }

4 /은 main.js에서 참조

1 개   'VUE의 "가져 오기 뷰
 2   './App.vue '가져 오기 앱
 3   수입 AlleyUI"./components "에서
 4   Vue.config.productionTip = 거짓 
5  Vue.use (AlleyUI);
6  7 새로운 뷰 ({
 8     렌더링 : H => 시간 (앱),
 9   }). $ 마운트 ( '# 응용 프로그램')

5 / 여기서, 패키지 어셈블리가 완료된 상기 App.vue에 사용될 수있다.

1 <템플릿>
 2     <div ID = "애플리케이션">
 3       <골목 버튼>按钮</ 골목 버튼>
 4       <골목 버튼 TYPE = "차">按钮</ 골목 버튼>
 5       <골목 버튼>按钮</ 골목 버튼>
 6       <골목 버튼>按钮</ 골목 버튼>
 7     </ DIV>
 8   </ 템플릿>
 9  10   <script>
 (11) (12)   수출 기본 {
 13     이름 : '응용 프로그램' ,
 14 15 }
 16   </ script>
17 18   <스타일>
 19    
   20   </ 스타일>

6 / 실행 결과

뷰 컴포넌트 패키지 (버튼 조립체 예에 패키지)

추천