이번에는 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 크로스 도메인 및 렌더링 사용 방법위 내용은 Vue의 전역 구성 요소를 사용하여 등록하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!