){kind=small}
Verwendung von Webkomponenten in Vue 2 und 3 + Composition API
Lesedauer: 10 Minuten
In diesem Beitrag geht es darum, wie man eine Webkomponente in eine Vue-Applikation einbindet. Die Beispiele umfassen die Vue-Versionen 2 und 3 sowie die Composition API. Version 3 wurde zum Zeitpunkt der Erstellung dieses Beitrags gerade veröffentlicht. Sie ist so neu, dass eine kleine Benachrichtigung "New content is available." häufig in der Dokumentation. Dann wird die Demo-Anwendung erweitert, um die Vonage Verify API.
Test results from custom-elements-everywhere.com showing Vue 2.6.12 scored 100%, passed 16/16 Basic tests, and 14/14 advanced tests with an explanation.
Testergebnisse von custom-elements-everywhere.com
Hinweis: Dies ist für Vue 2. Vue 3 wurde zum Zeitpunkt der Veröffentlichung dieses Beitrags noch nicht getestet.
Vue besteht alle Tests von custom-elements-everywhere.comdurch, erreicht 100% Kompatibilität und macht Ihren Laptop glücklich. Ist es für uns Entwickler nicht das wichtigste Ziel, Computer glücklich zu machen?
Dies sollte nicht allzu überraschend sein, da in der Vue-Dokumentation heißt es:
"Sie haben vielleicht bemerkt, dass Vue-Komponenten den Custom Elements, die Teil der Web Components Spec sind, sehr ähnlich sind. Das liegt daran, dass die Komponentensyntax von Vue lose nach der Spezifikation modelliert ist."
Worauf ist bei der Verwendung einer Webkomponente in einem JavaScript-Framework wie Vue zu achten? Wie funktioniert das Framework:
wissen, dass Sie überhaupt eine Webkomponente verwenden?
die Übergabe von Daten an die Webkomponente handhaben?
benutzerdefinierte Ereignisse aus der Webkomponente behandeln?
einen Verweis auf eine Webkomponente erhalten, so dass ein Entwickler Zugriff auf Dinge wie die Methoden der Webkomponente erhalten kann?
Es gibt mehrere Möglichkeiten, eine Vue-Anwendung zu konfigurieren und zu installieren. (Siehe Anleitungen für v2 und für v3.) Der in diesem Beitrag gezeigte Beispielcode ist ziemlich standardmäßig.
Glücklicherweise behandelt Vue Daten und Ereignisse über die Template-Syntax, die in den verschiedenen Versionen gleich bleibt.
Im vorigen (/blog/using-web-components-in-a-react-application-dr) war ein Problem bei der Verwendung einer Webkomponente in einer React-Anwendung die Art und Weise, wie React Daten übergibt. Unabhängig von der Art der Daten (z.B. Strings, Arrays, Objekte, Booleans, etc.), würde React die Werte stringifizieren. Um Vue mitzuteilen, dass die übergebenen Daten keine Strings sind, v-bind oder : kurz verwendet, wie in der Dokumentation.
Um zum Beispiel auf den Platzhalter in der Tastaturkomponente zuzugreifen und ihn zu setzen, wird dieser Code in den Tag der Komponente eingefügt:
:placeholder="placeholder"Im Datenbereich der Vue-Anwendung wird dann der Anfangswert des Platzhalters wie folgt gesetzt
placeholder: "Enter Security Code"Um den Wert zu ändern, lautet der Code
this.placeholder = "SUCCESS!!!";Dies ist ein Standardvorgang für eine Vue-Anwendung.
Ich habe vor kurzem die Möglichkeit hinzugefügt, die Tasten in den Tastaturkomponenten anzupassen, so dass ich in der Lage wäre, das Folgende zu meinem Tag hinzuzufügen und die Tastatur neu anzuordnen:
:keys = “[‘0’,’9’,’8’,’7’,’6’,’5’,’4’,’3’,’2’,’1’,’#’,’*’]”Ein Beispiel dafür wird in einem kommenden Blog-Beitrag unter Verwendung eines anderen Frameworks gegeben.
Vue kann auf DOM-Ereignisse (d.h. Klick, Scrollen, Senden usw.) mit v-on oder dem Kürzel @. Da Web-Komponenten wie normale HTML-Elemente behandelt werden, funktionieren auch ihre benutzerdefinierten Ereignisse. Um auf das Ereignis der Tastaturkomponente digits-sent zu hören, würde der dem Element hinzugefügte Code wie folgt aussehen:
@digit-sent=”digitsSent”digitsSent ist die Funktion, die die Ergebnisse des Ereignisses verarbeiten wird.
Nun, Vue mitzuteilen, dass es eine Webkomponente gibt und die Art und Weise, wie man mit ihr interagiert, ist etwas unterschiedlich, je nachdem, welche Version von Vue verwendet wird und ob die Composition API benutzt wird oder nicht. In jedem Fall wird Vue Sie darauf hinweisen, wenn Sie es falsch machen, indem eine Warnung in der Konsole angezeigt wird.
Vue console warning that it failed to resolve a component.
Siehe den Stift Webkomponenten x Vue 2 by conshus de OUR zeigen (@conshus) auf CodePen.
Um eine Vue 2 Anwendung wissen zu lassen, dass eine Webkomponente vorhanden ist, verwenden wir ignoredElements. Es ist ein Array, das Zeichenketten und/oder reguläre Ausdrücke enthält, die die Tag-Namen der Web-Komponenten aufzeigen. Dieses ignoredElements wird an die Vue-Konfiguration übergeben, damit diese weiß, dass sie diese "Elemente" ignorieren soll. Im Beispielcode sieht es so aus:
Vue.config.ignoredElements = [/dwanes-\w*/];Es kann vorkommen, dass wir die Methode einer Webkomponente aufrufen müssen. Um zum Beispiel die Anzeige der Tastaturkomponente zu löschen, wird die cancelAction Methode aufgerufen. Bevor die Methode verwendet werden kann, muss ein Verweis auf das Keypad-Element erstellt werden. Vue hat einen ähnlichen Weg wie React um dies zu erreichen: durch Hinzufügen eines ref Tag zur Webkomponente.
In der Komponente "Tastatur" sieht das so aus:
<dwanes-keypad ref="keypad" ...>
Dann wird die cancelAction mit aufgerufen:
this.$refs.keypad.cancelAction();
Siehe den Stift Webkomponenten x Vue 3 by conshus de OUR zeigen (@conshus) auf CodePen.
Vue 3 ist gerade herausgekommen! Es ist immer noch glänzend und neu (und verändert sich)!
Wie bereits erwähnt, basiert die Vue-Komponentensyntax lose auf der Web Components Spec. Also wäre die Verwendung einer Webkomponente in Vue 3 das gleiche wie in Vue 2, richtig? Nö! Es gibt eine entscheidende Änderung, die der Anwendung mitteilt, dass eine Webkomponente verwendet wird.
Weitere Einzelheiten zu dieser Änderung finden Sie im Migrationsleitfaden unter: config.ignoredElements Ist jetzt config.isCustomElement
Benutzerdefinierte Elemente Interop.
Zusammenfassend lässt sich sagen, dass die ignoredElements in Vue 2 zu isCustomElement in Vue 3. Anstelle eines Arrays, isCustomElement eine Funktion erwartet, die beschreibt, wonach zu suchen ist. Auch, jetzt in Vue 3, die Prüfung, ob das Element ein externes benutzerdefiniertes Element (dh, Web Component) ist während der Template-Kompilierung durchgeführt.
Wenn diese Vorlagenkompilierung "on-the-fly" erfolgt, isCustomElement in der Konfiguration der Anwendung übergeben. In der Demo-Code, das sieht aus wie:
const app = Vue.createApp(App);
app.config.isCustomElement = tag => tag.startsWith('dwanes-')
app.mount('#app');
Wenn das Projekt aus .vue Dateien enthält, wird ein Build-Schritt verwendet, um die Anwendung in einen für den Browser verständlichen Code zu kompilieren. In diesem Fall wird die isCustomElement an die Optionen der Bibliothek übergeben, die die Kompilierung vornimmt. Die Bibliothek hängt davon ab, was der Entwickler verwenden möchte. Im nächsten Abschnitt verwendet der Demo-Code Webpack und zeigt, wie man isCustomElement in die Konfigurationsdatei einfügt.
Eine Referenz zu einer Webkomponente in Vue 3 wird glücklicherweise auf die gleiche Weise wie in Vue 2 durchgeführt, zum Zeitpunkt dieses Blogposts.
Die Composition API von Vue wurde entwickelt, um einige Einschränkungen zu beseitigen, mit denen sich Entwickler konfrontiert sahen, als Anwendungen mit der Zeit wuchsen und immer komplexer wurden. In der Dokumentation:
"Die in diesem RFC vorgeschlagenen APIs bieten den Benutzern mehr Flexibilität bei der Organisation von Komponentencode. Anstatt gezwungen zu sein, den Code immer nach Optionen zu organisieren, kann der Code nun als Funktionen organisiert werden, von denen jede ein bestimmtes Merkmal behandelt. Die APIs machen es auch einfacher, Logik zwischen Komponenten oder sogar außerhalb von Komponenten zu extrahieren und wiederzuverwenden."
Ich empfehle dringend die Lektüre der Composition API Dokumentation zu lesen, um ein besseres Verständnis zu bekommen. Hier werde ich mich darauf konzentrieren, wie eine Webkomponente damit funktioniert. Dabei geht es darum, wie der Verweis auf die Komponente verwendet wird.
Eine Vue-Anwendung wissen zu lassen, dass es eine Webkomponente gibt, hat sich von Version 2 auf 3.
Je nachdem, wie die Anwendung die Vorlage kompiliert, bestimmt sie, wo sie die Konfiguration platziert. Im vorherigen Beispiel wurde die Vorlage "on-the-fly" kompiliert. In diesem Composition-API-Beispiel wird die Vorlage mit Webpack kompiliert. Das bedeutet, dass die isCustomElement Konfiguration wird in der webpack.config.js Datei. Dort finden Sie diesen Code:
{
test: /\.vue$/,
use: {
loader: "vue-loader",
options: {
compilerOptions: {
isCustomElement: (tag) => {
return /^dwanes-/.test(tag);
}
}
}
}
}
Unabhängig von der Kompiliermaschine gibt es wahrscheinlich eine .config.js Datei, in die Sie das obige Snippet einfügen würden.
In der Composition API wurde die ref nun auch die Verfolgung anderer Werte, nicht nur von DOM-Elementen.
Die ref die der Tastaturkomponente hinzugefügt wurde, bleibt gleich:
<dwanes-keypad ref="keypad" ...>
Die erste Änderung ist, dass ref importiert werden muss:
import { ref } from 'vue';Dann muss die Referenz in setup() initialisiert werden:
const keypad = ref(null);Stellen Sie sicher, dass Sie keypad zu dem return.
So greifen Sie auf die Methode cancelAction() Methode auf die Komponente zugreifen:
keypad.value.cancelAction();Achten Sie darauf, dass Sie value.
Das Gleiche gilt für das Setzen und Ändern des placeholder Text.
Eine Sache, die ich bei der Recherche für diesen Blogbeitrag gelernt habe, ist, dass Projekte, die auf Vue basieren, es gerne in den Namen aufnehmen, wenn sie können. Siehe Vuetify, Vuex, Revue, Vuedo, etc. Wie könnte ich mir also die Gelegenheit entgehen lassen, die Vonage Verify API zu verwenden und Vonage Vuerify zu erstellen?
Probieren Sie es aus!
Möchten Sie es selbst ausprobieren? Forken Sie zunächst den Code auf codesandbox.io.
Hinweis: Sie müssen eingeloggt sein.
Und so funktioniert es:
Zunächst benötigen Sie einen Vonage Developer Account. Notieren Sie sich Ihren API-Schlüssel und Ihr API-Geheimnis, die Sie auf der Seite Dashboardzu finden sind; Sie benötigen diese Werte für die Authentifizierung.
Als nächstes klicken Sie in Ihrem neu geforketen codesandbox.io Projekt auf das "Server Control Panel".
Screen capture of codesandbox.io code editor with the icon for the server control panel circled in red with a red arrow pointing to it.
Ganz unten befindet sich der Abschnitt "Secret Keys". Nehmen Sie die API Key und API Secret aus dem Vonage-Dashboard und fügen Sie sie an den entsprechenden Stellen ein. Brand Name ist die Zeichenfolge, die zusammen mit dem Sicherheitscode an den Benutzer gesendet wird. In diesem Fall ist es VonageVuerify.
Der App.vue Code sieht fast genauso aus wie der Code der Kompositions-API, mit Ausnahme der Art und Weise, wie die von der Webkomponente gesendeten Ziffern behandelt und an das Node Express-Backend gesendet werden.
Wenn der Benutzer den Sicherheitscode anfordert, wird eine POST Anfrage an den /request Endpunkt auf dem Server gestellt, der die im Textkörper eingegebene Telefonnummer übermittelt.
Wenn die Antwort zurückkommt und gültig ist, wird die Anforderungs-ID gespeichert, der Modus wird geändert, ein Text auf der Tastaturkomponente wird geändert und die Anzeige wird gelöscht. Andernfalls wird ein Fehler angezeigt.
Hier ist der Code:
App.vue
if (mode === "request") {
// Request security code
postData("https://qtebx-8081.sse.codesandbox.io/request", {
number: entered,
})
.then((data) => {
if (data.status === "0") {
requestId = data.request_id;
mode = "verify";
placeholder.value = "Enter verification code.";
actionText.value = "Verify Code";
keypad.value.cancelAction();
} else {
keypad.value.cancelAction();
status.value = data.error;
}
})
.catch((error) => {
console.error("Error: ", error);
});
}
server.js
app.post("/request", (request, response) => {
console.log("request.body: ", request.body);
nexmo.verify.request(
{
number: request.body.number,
brand: process.env.BRAND_NAME,
workflow_id: 6
},
(err, result) => {
if (err) {
console.error(err);
response.json(err);
} else {
console.log("request result: ", result);
if (result.status === 0) {
response.json({
status: result.status,
request_id: result.request_id
});
} else {
response.json({
status: result.status,
request_id: result.request_id,
error: result.error_text
});
}
}
}
);
});
Hinweis: Die
workflow_idist die Fallback-Strategie, die verwendet wird, um den Sicherheitscode an den Benutzer zu übermitteln. Die verschiedenen Optionen finden Sie in der Dokumentation. Diese Anwendung verwendet Workflow 6, der nur eine SMS-Nachricht sendet.
Wenn der Benutzer versucht, sich mit dem erhaltenen Code zu verifizieren, wird eine weitere POST Anfrage an den /check Endpunkt auf dem Server mit dem requestId und dem Sicherheitscode gesendet.
Wenn der Status als Erfolg zurückkommt, wird der Modus geändert, das Bild wird geändert, der Text der Tastaturkomponente wird geändert und die Anzeige wird gelöscht. Wenn der Status ein Fehler ist, wird er angezeigt.
Hier ist der Code:
App.vue
else if (mode === "verify") {
// verify code
postData("https://qtebx-8081.sse.codesandbox.io/check", {
request_id: requestId,
code: entered,
})
.then((data) => {
if (data.status === "0") {
//verified!!!
mode = "success";
placeholder.value = "Woohoo!!";
actionText.value = "SUCCESS!!!";
image.value = {
src: "https://media.giphy.com/media/oobNzX5ICcRZC/source.gif",
alt: "minion giving the thumbs up",
};
keypad.value.cancelAction();
} else {
keypad.value.cancelAction();
status.value = data.error;
}
})
.catch((error) => {
console.error("Error: ", error);
});
}
server.js
app.post("/check", (request, response) => {
console.log("check request.body: ", request.body);
nexmo.verify.check(
{
request_id: request.body.request_id,
code: request.body.code
},
(err, result) => {
if (err) {
console.error(err);
response.json(err);
} else {
console.log("check result: ", result);
if (result.status === 0) {
response.json({ status: result.status });
} else {
response.json({ status: result.status, error: result.error_text });
}
}
}
);
});
Hinweis: Wenn Sie den Democode forken, müssen die Endpunkte, die in der
App.vueaufgerufenen Endpunkte müssen geändert werden, um den Server Ihres Projekts widerzuspiegeln.
Um mehr über die Vonage Verify API zu erfahren, können Sie die Dokumentation.
Haben Sie Fragen zu dem, was in diesem Beitrag behandelt wurde? Haben Sie Web-Komponenten auf andere Weise in eine Vue-Applikation integriert? Haben Sie ein Beispiel, wie Sie die Vonage Verify API verwenden? Lassen Sie es uns wissen auf unserem Slack-Kanal der Gemeinschaft.
img.alignnone { border-width: 0px !important; }