Wie erstelle ich eine benutzerdefinierte globale Komponente in Vue?-js-Tutorial-php.cn

Wie erstelle ich eine benutzerdefinierte globale Komponente in Vue?

亚连

Freigeben： 2018-06-08 18:06:18

Original

2462 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Verwendung benutzerdefinierter globaler Vue-Komponenten (benutzerdefinierte Plug-Ins) vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Manchmal möchten wir bei der Entwicklung selbst ein Plug-In schreiben und dann unser eigenes Plug-In verwenden, was uns ein starkes Erfolgserlebnis gibt. Als Blogger kürzlich element-ui und axios untersuchten, stellten sie fest, dass es sich um benutzerdefinierte Komponenten handelt. Der einzige Unterschied besteht jedoch darin, dass sie bei Verwendung von element-ui die Anweisung Vue.use() verwenden, während sie bei Verwendung von axios ohne Vue.use( ), es fühlt sich sehr magisch an. Ich habe herausgefunden, dass der Unterschied zwischen ihnen darin besteht, dass in Axios keine Installationsmethode geschrieben ist, während element-ui diese Methode einfach zum Schreiben verwendet hat eigenes Plugin.

Bevor Sie dieses Plug-in schreiben, generieren Sie zunächst ein Verzeichnis zum Speichern des Plug-ins. Als Blogger lege ich es in das Ladeverzeichnis einer Komponente:

In diesem Verzeichnis schreibe ich gemäß der Gewohnheit des Bloggers eine index.js-Datei und eine Komponente . Loading.vue, index.js ist über die Installationsmethode von Loading.vue geschrieben. Der Code lautet wie folgt:

import LoadingComponent from &#39;./Loading.vue&#39;

const Loading={
  install:function (Vue) {
    Vue.component(&#39;Loading&#39;,LoadingComponent)
  }
}
export default Loading

Nach dem Login kopieren

Die Installationsmethode wird in main.js dargestellt. Wenn die Methode Vue.use() verwendet wird, ruft diese Methode standardmäßig die Installationsmethode auf. Komponenten werden auch in der Installationsmethode registriert. „Loading“ bezieht sich hier auf den Komponentennamen, der von App.vue außerhalb verwendet wird, und LoadingComponent bezieht sich auf Loading.vue, das oben zitiert wurde. Dann exportieren Sie über den Standard-Export-Ladevorgang.

Dann sieht der Loading.vue-Code so aus:

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

Nach dem Login kopieren

Nachdem der Loading.vue-Code geschrieben wurde, wird er in die Standarddatei main.js importiert und mithilfe von Vue.use importiert ()-Methode Die index.js, die Sie gerade geschrieben haben:

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

Nach dem Login kopieren

Dann verwenden Sie einfach die Vorlage in der App.vue-Methode:

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

Nach dem Login kopieren

Sie können auch einfach Ihre eigene in die Datei „loading.vue“ schreiben Jetzt etwas Code, z. B. das Schreiben eines Kalender-Plug-Ins, eines Schaltflächen-Plug-Ins usw. Zum Beispiel dieses hier:

<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>

Nach dem Login kopieren

Der Effekt ist ein rollender Kreis:

Das Obige ist das, was ich für alle zusammengestellt habe an alle in der Zukunft.

Verwandte Artikel:

So kompilieren, verpacken und anzeigen Sie Indexdateien in Vue

So verwenden Sie die Jade-Vorlage in Vue

Vorlage an Komponente in Angular übergeben

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine benutzerdefinierte globale Komponente in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!