이 글에서는 주로 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를 통해 전역 구성 요소가 호출됩니다.
위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.
관련 기사:
AngularJS에서 MVC에 대한 복잡한 작업이 있습니다
위 내용은 전역 메소드를 통해 Vue.use() 컴포넌트를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!