vue.use란 무엇인가요?

vue.use는 컴포넌트나 플러그인을 전역적으로 등록하는 공식 API입니다. 플러그인이 객체인 경우 설치 메소드를 제공해야 합니다. 설치 방법으로 사용됩니다. 이 메소드는 "New Vue()"를 호출하기 전에 호출되어야 합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, Vue 버전 2.9.6 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

공식 API 소개:

Vue.use(plugin)

Parameters

{Object | 플러그인이 객체인 경우 설치 방법을 제공해야 합니다. 플러그인이 함수인 경우 설치 방법으로 작동합니다. install 메소드가 호출되면 Vue가 매개변수로 전달됩니다.

이 메서드는 New Vue()를 호출하기 전에 호출되어야 합니다. 동일한 플러그인에서 install 메소드를 여러 번 호출하면 해당 플러그인은 한 번만 설치됩니다.

Vue.use 사용

Element-UI 예제ElementUI 문서에 따르면 Vue cli

/*
mian.js
*/
import Vue from 'vue';
import ElementUI from 'element-ui'; // 1
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI); // 2

new Vue({
el: '#app',
render: h => h(App)
});

로 빌드한 프로젝트에서 ElementUI를 이렇게 사용한다고 합니다.

위 코드로 Element 소개를 완성하고, 참고하세요. 예, 스타일 파일을 별도로 가져와야 합니다. 나중에 를 사용하여 Vue의 단일 파일 구성 요소에서 Element 요소를 직접 사용할 수 있습니다. 그럼 정확히 무슨 일이 일어났나요?

1. 첫 번째 댓글은 ElementUI를 가져옵니다

import ElementUI from 'element-ui'

// TODO 모듈을 가져오는 방법을 이해하세요

다음은 src/index.js의 내용입니다. 보시다시피 index.js는 객체를 내보냅니다. 위 import 문에서 이 객체에는 ElementUI라는 변수 이름이 지정됩니다. 여기에서 설치 기능을 참고하세요.

/*
index.js
*/
export default {
  version: '2.11.1',
  locale: locale.use,
  i18n: locale.i18n,
  install,
  ...
};

2. 두 번째 코멘트는 ElementUI를 설치하는 것입니다

Vue.use(ElementUI);

여기에서는 Vue.use 메소드가 사용되고 ElementUI 객체가 전달되는 것을 관찰했습니다. Vue.use 문서에서 ElementUI 객체의 설치 메소드를 호출하고 Vue를 전달한다는 것을 알 수 있습니다.

// install函数
const install = function(Vue, opts = {}) {
 locale.use(opts.locale);
 locale.i18n(opts.i18n);

// 安装组件：通过Vue.component声明全局组件，所以我们能够直接使用而不需要声明
 components.forEach(component => {
   Vue.component(component.name, component);
 });

 Vue.use(InfiniteScroll);
 Vue.use(Loading.directive);

// 在Vue的原型链上做一些小动作所以所有的Vue实例都可以访问到这些生命的变量
// 变量名使用$开头表明这是公共API属性或者方法，这是一种约定。
 Vue.prototype.$ELEMENT = {
   size: opts.size || '',
   zIndex: opts.zIndex || 2000
 };

// ok，这里我们看到了许多用于提示的组件都设定在Vue原型链上，所以我们可以在Vue实例内部直接使用this.$alert
 Vue.prototype.$loading = Loading.service;
 Vue.prototype.$msgbox = MessageBox;
 Vue.prototype.$alert = MessageBox.alert;
 Vue.prototype.$confirm = MessageBox.confirm;
 Vue.prototype.$prompt = MessageBox.prompt;
 Vue.prototype.$notify = Notification;
 Vue.prototype.$message = Message;

};

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 비디오

를 방문하세요! !

위 내용은 vue.use란 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!