전역 메소드를 통해 Vue.use() 컴포넌트를 사용하는 방법

이 글에서는 주로 Vue.use() 전역 메서드를 통해 vue의 사용자 정의 전역 구성 요소와 그 사용법을 소개합니다. 관심 있는 친구는

Introduction

Vue.use(플러그인): Vue 설치를 참조할 수 있습니다. js 플러그인. 플러그인이 객체인 경우 설치 방법을 제공해야 합니다. 플러그인이 함수인 경우 설치 방법으로 사용됩니다. 설치 메소드는 Vue에 대한 매개변수로 호출됩니다.

동일한 플러그인에서 install 메소드를 여러 번 호출하면 해당 플러그인은 한 번만 설치됩니다.

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)

예: 하위 구성 요소 구현

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를 통해 전역 구성 요소가 호출됩니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

React에서 구성 요소 내부 통신을 구현하는 방법

jQuery에서 동적 데이터 페이징을 구현하는 방법

AngularJS에서 MVC에 대한 복잡한 작업이 있습니다

위 내용은 전역 메소드를 통해 Vue.use() 컴포넌트를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!