Lassen Sie uns kurz die Plug-Ins und Komponenten in Vue analysieren und über ihre Unterschiede sprechen!

Was sind Komponenten? Was ist ein Plug-in? Der folgende Artikel wird Ihnen helfen, die Plug-Ins und Komponenten in Vue zu verstehen und über die Unterschiede zwischen Plug-Ins und Komponenten zu sprechen. Ich hoffe, dass er für alle hilfreich ist!

1. Was ist eine Komponente?

Erinnern Sie sich an die vorherige Definition von Komponenten:

Komponenten sind ein Entwicklungsmodell, das verschiedene grafische und nichtgrafische Logiken in einem einheitlichen Konzept (Komponente) abstrahiert >.vue-Datei in Vue kann als Komponente betrachtet werden. (Teilen von Lernvideos: vue Video TutorialVue中每一个.vue文件都可以视为一个组件。（学习视频分享：vue视频教程）

组件的优势

• 降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现
• 调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单
• 提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级

二、插件是什么

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

• 添加全局方法或者属性。如: vue-custom-element
• 添加全局资源：指令/过滤器/过渡等。如 vue-touch
• 通过全局混入来添加一些组件选项。如vue-router
• 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
• 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如vue-router

三、两者的区别

两者的区别主要表现在以下几个方面：

• 编写形式
• 注册形式
• 使用场景

编写形式

编写组件

编写一个组件，可以有很多方式，我们最常见的就是vue单文件的这种格式，每一个.vue文件我们都可以看成是一个组件

vue文件标准格式

<template>
</template>
<script>
export default{ 
    ...
}
</script>
<style>
</style>

我们还可以通过template属性来编写一个组件，如果组件内容多，我们可以在外部定义template组件内容，如果组件内容并不多，我们可直接写在template属性上

<template id="testComponent">     // 组件显示的内容
    <div>component!</div>   
</template>

Vue.component(&#39;componentA&#39;,{ 
    template: &#39;#testComponent&#39;  
    template: `<div>component</div>`  // 组件内容少可以通过这种形式
})

编写插件

vue插件的实现应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  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组件注册主要分为全局注册与局部注册

全局注册通过Vue.component方法，第一个参数为组件的名称，第二个参数为传入的配置项

Vue.component('my-component-name', { /* ... */ })

1

局部注册只需在用到的地方通过components属性注册一个组件

const component1 = {...} // 定义一个组件

export default {
	components:{
		component1   // 局部注册
	}
}

插件注册

插件的注册通过Vue.use()的方式进行注册（安装），第一个参数为插件的名字，第二个参数是可选择的配置项

Vue.use(插件名字,{ /* ... */} )

注意的是：

注册插件的时候，需要在调用 new Vue() 启动应用之前完成

Vue.use会自动阻止多次注册相同插件，只会注册一次

使用场景

具体的其实在插件是什么章节已经表述了，这里在总结一下

组件 (Component) 是用来构成你的 App 的业务模块，它的目标是 App.vue

插件 (Plugin) 是用来增强你的技术栈的功能模块，它的目标是 Vue 本身

简单来说，插件就是指对Vue)

Komponentenvorteile

• Reduzieren Sie die Kopplung des gesamten Systems, während wir die Schnittstelle unverändert lassen, um die Anforderungen schnell zu erfüllen. Beispielsweise können das Eingabefeld durch Kalender, Zeit, Bereich und andere Komponenten ersetzt werden Für bestimmte Zwecke. Da das gesamte System aus Komponenten besteht, können Sie die Fehlerbehebungsmethode verwenden, um die Komponente direkt zu entfernen oder das Problem schnell zu lokalisieren Basierend auf der Komponente, die den Fehler gemeldet hat. Der Grund für die schnelle Positionierung liegt darin, dass jede Komponente eine geringe Kopplung und Einzelverantwortung aufweist. Daher ist die Logik einfacher als die Analyse des gesamten Systems.
• Verbesserung der Wartbarkeit, da jede einzelne Komponente einen Fehler aufweist Die Komponente hat eine einzige Verantwortung und die Komponente wird im System wiederverwendet, sodass durch Optimierung des Codes eine Gesamtaktualisierung des Systems erreicht werden kann

2 . Was ist ein Plug-in? Plug-ins werden normalerweise verwendet, damit Vue globale Funktionen hinzufügt. Es gibt keine strengen Einschränkungen hinsichtlich des Funktionsumfangs von Plug-Ins – im Allgemeinen gibt es folgende Typen:

• Globale Methoden oder Eigenschaften hinzufügen. Zum Beispiel: vue-custom-element
• Globale Ressourcen hinzufügen: Anweisungen/Filter/Übergänge usw. Beispielsweise fügt vue-touch
• einige Komponentenoptionen durch globales Mischen hinzu. Beispielsweise fügt vue-router
• Vue-Instanzmethoden hinzu, indem es sie zu Vue.prototype hinzufügt.
• Eine Bibliothek, die ihre eigene API bereitstellt und eine oder mehrere der oben genannten Funktionen bereitstellt. Wie vue-router

3 Der Unterschied zwischen den beiden

🎜🎜Der Unterschied zwischen den beiden ist hauptsächlich spiegelt sich in folgenden Aspekten wider: 🎜

• Schreibformular
• Anmeldeformular
• Nutzungsszenarien

🎜Schreibform🎜

🎜Schreibkomponente🎜

🎜Es gibt viele Möglichkeiten, eine Komponente zu schreiben, unsere häufigste ist vueIn diesem Format einer einzelnen Datei kann jede .vue-Datei als Komponente betrachtet werden🎜🎜vue-Dateistandardformat🎜rrreee🎜Wir können auch bestehen template-Attribut zum Schreiben einer Komponente. Wenn die Komponente viel Inhalt hat, können wir den Inhalt der template-Komponente extern definieren Schreiben Sie es direkt in template-Attribut 🎜rrreee<h4 data-id="heading-5">🎜Schreiben Sie ein Plug-in🎜</h4>🎜Die Implementierung von <code>vue-Plug-in sollte eine <code>install-Methode verfügbar machen. Der erste Parameter dieser Methode ist der Vue-Konstruktor und der zweite Parameter ist ein optionales Optionsobjekt🎜rrreee

🎜Registrierungsformular🎜 h3>🎜Komponentenregistrierung🎜🎜vueDie Komponentenregistrierung ist hauptsächlich in globale Registrierung und lokale Registrierung unterteilt🎜🎜Globale Registrierung über Vue .component -Methode, der erste Parameter ist der Name der Komponente und der zweite Parameter ist das eingehende Konfigurationselement 🎜rrreee🎜1🎜🎜Bei der lokalen Registrierung müssen nur Komponentenverwendet werden >Attributregistrierung von eine Komponente🎜rrreee

🎜Plug-in-Registrierung🎜

🎜Plug-in-Registrierung wird über Vue.use() (Installation) registriert, Der erste Parameter ist der Name des Plug-Ins und der zweite Parameter ist das optionale Konfigurationselement🎜rrreee🎜Hinweis:🎜🎜Bei der Registrierung des Plug-Ins müssen Sie new Vue() aufrufen um es zu starten Vor der Anwendung abgeschlossen🎜🎜Vue.use verhindert automatisch mehrere Registrierungen desselben Plug-Ins und registriert es nur einmal🎜

🎜 Verwendungsszenarien🎜

🎜 Die Einzelheiten werden tatsächlich im Kapitel darüber erklärt, was ein Plug-in ist. Hier ist eine Zusammenfassung🎜🎜Komponente (Komponente) wird verwendet, um das Geschäftsmodul Ihres zu bilden App. Sein Ziel ist Vue selbst🎜 🎜Einfach ausgedrückt beziehen sich Plug-ins auf Erweiterungen oder Ergänzungen der Funktionen von Vue🎜🎜 (Lernvideo-Sharing: 🎜Web-Front-End-Entwicklung🎜, 🎜Einfaches Programmiervideo🎜)🎜

Das obige ist der detaillierte Inhalt vonLassen Sie uns kurz die Plug-Ins und Komponenten in Vue analysieren und über ihre Unterschiede sprechen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!