Vue의 전역 구성 요소를 사용하여 등록하는 방법

이번에는 Vue 글로벌 컴포넌트를 Use로 등록하는 방법과 Vue 글로벌 컴포넌트를 Use로 등록할 때 주의사항에 대해 알려드리겠습니다.

Vue의 구성 요소와 지침은 로컬 구성 요소, 로컬 지침 및 전역 구성 요소와 전역 지침으로 구분됩니다. 특정 수의 글로벌 명령어와 글로벌 컴포넌트를 등록할 때 공식 문서의 방법이 다소 불분명해 보입니다.

글로벌 컴포넌트

Vue 공식 문서에 소개된 것은 Vue.comComponent(tagName, options)를 사용하여 글로벌 컴포넌트를 생성하는 것입니다. 하지만 이 방법은 루트 인스턴스와 동일한 파일에 작성됩니다. 여러 전역 구성 요소를 동시에 등록하려면 루트 인스턴스 파일이 너무 무거워지므로 "install"을 사용하세요. " 전역 구성 요소입니다. 더 가벼워 보입니다.

방법:

1. 새 플러그인 폴더를 생성합니다

2.Components.js 파일에 등록할 모든 파일을 소개합니다. 4. app.js 루트 인스턴스 파일에 Components.js를 소개합니다.

예: 구성 요소를 예로 들어 보겠습니다.

comComponents.js:

import eg from '../components/eg.vue';
export default (Vue)=>{
 Vue.component("Eg",eg);
}

app.js:

import components from './plugins/components.js';
Vue.use(components);

위 내용 이후 작성 후 , 전역 구성 요소 Eg가 등록됩니다. 여러 전역 구성 요소를 등록해야 하는 경우 이 방법을 사용하는 것이 더 신선합니다!

글로벌 지시어

글로벌 지시어 등록을 위해 공식 문서에 제시된 방법은 Vue.directive()를 사용하는 것입니다. 그러면 문제가 발생합니다. . 여러 전역 구성 요소와 결합된 여러 전역 지시문이 있는 경우 app.js 파일이 매우 커집니다.

따라서 위의 전역 구성 요소 등록 방법과 유사하게 Vue.use()는 전역 지시문을 "설치"하는 데에도 사용됩니다.

방법:

1. 새 플러그인 폴더를 생성합니다2. directives.js 파일을 생성하여 폴더에 전역 구성요소를 배치합니다

3. directives.js에 등록할 모든 전역 구성요소를 소개합니다. 파일 지침

4 app.js 루트 인스턴스 파일에 directives.js를 도입하세요

v-focus 지침을 예로 들어보세요:

directives.js:

export default (Vue)=>{
 Vue.directive("focus",{
  inserted:function(el){
   el.focus();
  }
 })
}

app.js

import directives from "./plugins/directives.js"
Vue.use(directives);

이 전역 지시어처럼 등록하세요. 이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

vue2.0axios 크로스 도메인 및 렌더링 사용 방법

JS를 사용하여 모든 중복 문자를 제거하는 방법

위 내용은 Vue의 전역 구성 요소를 사용하여 등록하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!