Vue 전역 구성 요소 및 전역 지시문을 등록하는 데 사용하는 방법

아래에서는 Vue 전역 구성 요소 및 전역 지침을 등록하는 데 사용하는 방법을 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

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

글로벌 컴포넌트

Vue 공식 문서에 소개된 것은 Vue.comComponent(tagName, options)를 사용하여 글로벌 컴포넌트를 생성하는 것입니다. 하지만 이 메서드는 루트 인스턴스와 동일한 파일에 작성됩니다. 동시에 여러 전역 구성 요소를 등록하려는 경우 루트 인스턴스 파일이 너무 무거워지므로 Vue.use( ) 전역 구성 요소를 "설치"하기 위해 더 가벼워졌습니다.

방법:

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

2. 폴더에 전역 구성요소를 배치하기 위해 Components.js 파일을 만듭니다.

3. 파일 Components

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);

After 위의 쓰기에서는 전역 구성 요소 Eg가 등록됩니다.

여러 전역 구성 요소를 등록해야 하는 경우 이 방법을 사용하는 것이 더 신선합니다!

Global directives

global directives 등록을 위해 공식 문서에 제시된 방법은 Vue.directive()를 사용하는 방법인데, 위치도 루트 인스턴스 파일 아래에 있습니다. 그러면 문제가 발생합니다. 여러 전역 지시문이 여러 전역 구성 요소와 결합되어 app.js 파일이 극도로 비대해집니다.

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

방법:

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

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

3. directives.js에 등록할 모든 전역 구성요소를 소개합니다. file Directives

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);

위 내용은 제가 모든 사람을 위해 정리한 것입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

jQuery+ajax json 데이터 읽기 및 가격순 정렬 예시

vue 데이터 제어 보기 소스 코드 분석

버튼 구성 요소 개발을 위한 vue 샘플 코드

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