vue.useとは何ですか?

vue.use は公式 API であり、コンポーネントまたはプラグインをグローバルに登録するメソッドです。プラグインがオブジェクトの場合は、インストール メソッドを提供する必要があります。プラグインがオブジェクトの場合は、インストール メソッドを提供する必要があります。関数の場合、インストール方法として使用されます。このメソッドは、「New Vue()」を呼び出す前に呼び出す必要があります。

このチュートリアルの動作環境: Windows 7 システム、Vue バージョン 2.9.6。この方法は、すべてのブランドのコンピューターに適しています。

公式 API の紹介:

Vue.use(plugin)

パラメータ

{オブジェクト | 関数} プラグイン

使用方法

Vue.js プラグインをインストールします。プラグインがオブジェクトの場合は、インストール メソッドを提供する必要があります。プラグインが関数の場合、インストール メソッドとして機能します。 install メソッドが呼び出されるとき、Vue がパラメータとして渡されます。

このメソッドは、New Vue() を呼び出す前に呼び出す必要があります。

同じプラグインによって install メソッドが複数回呼び出された場合、プラグインは 1 回だけインストールされます。

Vue.use の使用方法

Element-UI の例

ElementUI ドキュメントによると, in Vue cliでビルドしたプロジェクトでは、上記のコードでElementUI

/*
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)
});

を使ったElementの導入が完了しますが、スタイルファイルは別途導入する必要があるので注意してください。
後で、 を直接使用して、Vue の単一ファイル コンポーネントの Element 要素を使用できます。 ＃＃＃どうしたの？

1. 最初のコメント imports 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. 2 番目のコメントは、ElementUI

Vue.use(ElementUI);

をインストールすることです。ここでは Vue.use メソッドが使用され、ElementUI オブジェクトが渡されることがわかりました。 Vue.use ドキュメントから、これが ElementUI オブジェクトの install メソッドを呼び出して 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 中国語 Web サイトの他の関連記事を参照してください。