vue 에서 전역 구성 요 소 를 사용자 정의 하고 전역 방법 으로 Vue.use()를 사용 합 니 다.

2320 단어 vueuse전역 구성 요소
간단 한 소개
Vue.use(plugin):Vue.js 플러그 인 을 설치 합 니 다.플러그 인 이 대상 이 라면 인 스타 그램 방법 을 제공 해 야 합 니 다.플러그 인 이 함수 라면 인 스타 그램 방법 으로 사 용 됩 니 다.install 방법 은 Vue 의 매개 변수 로 호출 됩 니 다.
인 스타 그램 방법 이 같은 플러그 인 에 여러 번 호출 되면 플러그 인 은 한 번 만 설 치 됩 니 다.
Vue.js 플러그 인 은 공개 적 인 방법 으로 설치 해 야 합 니 다.이 방법의 첫 번 째 매개 변 수 는 Vue 구조 기 이 고 두 번 째 매개 변 수 는 선택 할 수 있 는 옵션 대상 입 니 다.

MyPlugin.install = function (Vue, options) {
 // 1.          
 Vue.myGlobalMethod = function () {
  //   ...
 }
 // 2.       
 Vue.directive('my-directive', {
  bind (el, binding, vnode, oldVnode) {
   //   ...
  }
  ...
 })
 // 3.     
 Vue.mixin({
  created: function () {
   //   ...
  }
  ...
 })
 // 4.       
 Vue.prototype.$myMethod = function (methodOptions) {
  //   ...
 }
}
전역 방법 으로 Vue.use()플러그 인 사용:

//    `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
옵션 대상 을 입력 할 수도 있 습 니 다:

Vue.use(MyPlugin, { someOption: true })
Vue.use 는 같은 플러그 인 을 여러 번 등록 하 는 것 을 자동 으로 막 습 니 다.이 플러그 인 은 한 번 만 등록 합 니 다.
Vue.js 가 공식 적 으로 제공 하 는 일부 플러그 인(예 를 들 어 vue-router)은 Vue 가 접근 가능 한 전역 변수 임 을 감지 할 때 Vue.use()를 자동 으로 호출 합 니 다.그러나 예 를 들 어 CommonJS 의 모듈 환경 에서 Vue.use()를 항상 명시 적 으로 호출 해 야 합 니 다.

//   Browserify   webpack     CommonJS      
var Vue = require('vue')
var VueRouter = require('vue-router')
//          
Vue.use(VueRouter)
인 스 턴 스:children 구성 요소 구현
main.js 에서 이 구성 요 소 를 사용 하 는 방법:

import childModule from './components/children'
Vue.use(childModule)
구성 요소 폴 더 의 디 렉 터 리 구 조 는 다음 과 같 습 니 다.

|-components
　　|-children
　　　　|-index.js     ，  install
　　　　|-children.vue （         ）
children.vue 코드 는 다음 과 같 습 니 다.

import childrencomponent from './children.vue'
const childrenMo = {
  install:function(Vue){
    Vue.component('childModule',childrencomponent)
  }
}
export default childrenMo
이렇게 하면 vue.use 를 통 해 전역 구성 요 소 를 호출 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
JS 중 에!!
php 위 챗 결제 앱 결제 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage