Vue でカスタム グローバル コンポーネントを作成するにはどうすればよいですか?

この記事では主に vue のカスタム グローバル コンポーネント (カスタム プラグイン) の使用方法を紹介し、参考にさせていただきます。

開発をしていると、自分でプラグインを書いて、自分で作ったプラグインを使いたいと思うことがあります。そうすることで強い達成感を得ることができます。ブロガーが最近 element-ui と axios を研究したところ、これらがカスタム コンポーネントであることがわかりました。しかし、唯一の違いは、element-ui を使用する場合は Vue.use() ステートメントを使用するのに対し、 axios を使用する場合は Vue.use() を使用しないことです。 ）、インポートするだけでインポートできるのはとても魔法のように感じます。よく調べてみると、axios にはインストールメソッドが記述されていないのに対し、element-ui にはこのインストールメソッドが記述されているためです。独自のプラグイン。

まず、このプラグインを作成する前に、プラグインを格納するディレクトリを生成します。ブロガーとして、私はコンポーネントの読み込みディレクトリにそれを置きます:

このディレクトリには、ブロガーの習慣に従って、index.js ファイルと、index に書かれたコンポーネントのloading.vueを書きます。 jsloading.vueのインストール方法についてです。コードは次のとおりです:

import LoadingComponent from './Loading.vue'

const Loading={
  install:function (Vue) {
    Vue.component('Loading',LoadingComponent)
  }
}
export default Loading

install メソッドは main.js で表されます。Vue.use() メソッドが使用されている場合、このメソッドはデフォルトで install メソッドを呼び出します。コンポーネントはインストール メソッドにも登録されます。ここでの「Loading」は外部の App.vue で使用されるコンポーネント名を指し、LoadingComponent は上で引用した Loading.vue を指します。次に、エクスポートのデフォルトの読み込みを介してエクスポートします。

その後、Loading.vue コードは次のようになります:

<template>
  <p class="loading-box">
    Loading...
  </p>
</template>
<script></script>

Loading.vue コードが記述された後、それはデフォルトの main.js ファイルにインポートされ、記述されたばかりの Index.js は Vue.use を使用してインポートされます。 () メソッド:

import Vue from 'vue'
import App from './App.vue'
import Loading from './components/loading'
Vue.use(Loading)
new Vue({
 el: '#app',
 render: h => h(App)
})

次に、App.vue メソッドでテンプレートを使用するだけです:

<template>
 <p id="app">
  <Loading></Loading>
 </p>
</template>

また、カレンダー プラグイン、ボタンの作成など、loading.vue ファイルに独自のコードをいくつか記述することもできます。プラグインなどたとえば、これ:

<template>
  <p class="loader">
    <p class="loader-inner ball-spin-fade-loader">
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </p>
  </p>
</template>
<style scoped>
  .loader{
    width:80px;
    height: 80px;
    margin:50px auto;
  }
  @keyframes ball-spin-fade-loader {
    50% {
      opacity: 0.3;
      -webkit-transform: scale(0.4);
      transform: scale(0.4); }

    100% {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1); } }

  .ball-spin-fade-loader {
    position: relative; }
  .ball-spin-fade-loader > p:nth-child(1) {
    top: 25px;
    left: 0;
    -webkit-animation: ball-spin-fade-loader 1s 0s infinite linear;
    animation: ball-spin-fade-loader 1s 0s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(2) {
    top: 17.04545px;
    left: 17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear;
    animation: ball-spin-fade-loader 1s 0.12s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(3) {
    top: 0;
    left: 25px;
    -webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear;
    animation: ball-spin-fade-loader 1s 0.24s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(4) {
    top: -17.04545px;
    left: 17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear;
    animation: ball-spin-fade-loader 1s 0.36s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(5) {
    top: -25px;
    left: 0;
    -webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear;
    animation: ball-spin-fade-loader 1s 0.48s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(6) {
    top: -17.04545px;
    left: -17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear;
    animation: ball-spin-fade-loader 1s 0.6s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(7) {
    top: 0;
    left: -25px;
    -webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear;
    animation: ball-spin-fade-loader 1s 0.72s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(8) {
    top: 17.04545px;
    left: -17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;
    animation: ball-spin-fade-loader 1s 0.84s infinite linear; }
  .ball-spin-fade-loader > p {
    background-color: #399;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    position: absolute; }
</style>

効果はローリングサークルです:

上記は、私が皆さんのためにまとめたものです。将来的に皆さんのお役に立てれば幸いです。

関連記事:

vueでインデックスファイルをコンパイル、パッケージ化、表示する方法

vueでJadeテンプレートを使用する方法

Angularのコンポーネントにテンプレートを渡す

以上がVue でカスタム グローバル コンポーネントを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。