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

亚连
풀어 주다: 2018-06-21 19:08:56
원래의
2886명이 탐색했습니다.

이 글에서는 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿