So kapseln Sie wiederverwendbare Komponenten in Vue

Im Folgenden werde ich einen Artikel darüber teilen, wie man wiederverwendbare Komponenten in Vue kapselt. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

Die diesmal verpackte Komponente nimmt die Toast-Komponente als Beispiel

Bei der Verwendung des mobilen UI-Plug-Ins in der Vergangenheit durch a Code wie $.toast( 'Content to be display' ), wodurch dieser Text auf der Seite angezeigt wird und nach einer bestimmten Zeitspanne verschwindet.

Jetzt versuchen wir auch, die Toastkomponente selbst zu verkapseln.

Vorbereitende Arbeiten: vue-cli-Gerüstprojekt

Schauen Sie sich zunächst die Screenshots der beteiligten Dateiverzeichnisse an:

Die wichtigsten an diesem Paket beteiligten Dateien sind Toast.vue toast.js Hello.vue. Die Hauptideen sind wie folgt:

① Toast.vue ist die Toastkomponente, die wir verwenden möchten; >

② toast Verwenden Sie in .js

Vue.extend(), um einen Komponentenkonstruktor zu erweitern, und instanziieren Sie dann den Komponentenkonstruktor, um eine wiederverwendbare Komponente zu erstellen.

Abschließend exportieren Sie die Funktion myToast in toast.js. Die Logik in der Funktion myToast wird im Code erklärt.

③ Rufen Sie die Funktion in Hello.vue auf, um die Komponente anzuzeigen.

Toast.vue-Code:

<template>
	<p class="toast" v-if="isShow">
		<p class="toast-p">{{ text }}</p>
	</p>
</template>
<script>
export default{
	data(){
		return {
			text:&#39;内容&#39;,
			isShow:true,
			duration:1500
		}
	}
}
</script>
<style>
*{
	margin: 0;
	padding: 0;
}
.toast{
 	position: fixed;
 	left: 50%;
 transform: translate(-50%, 0);
 margin-top: 5rem;
 background: #000000;
 line-height: 0.7rem;
	color: #FFFFFF;
	padding: 0 0.2rem;
	border-radius: 0.2rem;
}
</style>

Toast.js-Code:

import Vue from 'vue'; 
import Toast from '@/components/Toast'; //引入组件 
let ToastConstructor = Vue.extend(Toast) // 返回一个“扩展实例构造器” 
 
let myToast = ()=>{ 
 let toastDom = new ToastConstructor({ 
 el:document.createElement('p') //将toast组件挂载到新创建的p上 
 }) 
 document.body.appendChild( toastDom.$el ) //把toast组件的dom添加到body里 
} 
export default myToast;

Hello.vue-Code:

<template>
 <p class="hello">
 <button @click="showToast">按钮</button>
 </p>
</template>
<script>
import Vue from &#39;vue&#39;;
import toast from &#39;./js/toast&#39;; //引入toast函数
Vue.prototype.$toast = toast;  //给Vue对象添加$toast方法
export default {
 name: &#39;hello&#39;,
 data () {
 return {
 
 }
 },
 methods:{
 	showToast(){
 		this.$toast();  //现在就可以调用了
 	}
 }
}
</script>

Durch die oben genannten Schritte gibt es immer noch einen Unterschied zum echten Toast-Effekt. Der Effekt, den wir erreichen möchten, besteht darin, dass der angezeigte Inhalt nach einer gewissen Zeit verschwindet Ändern Sie es aus toast.js. Sie müssen die Funktion myToast neu schreiben und zwei eingehende Parameter dafür festlegen, einen für den angezeigten Inhalt und einen für die angezeigte Zeit.

Der geänderte Code von toast.js lautet wie folgt:

import Vue from 'vue'; 
import Toast from '@/components/Toast'; //引入组件 
let ToastConstructor = Vue.extend(Toast) // 返回一个“扩展实例构造器” 
 
let myToast = (text,duration)=>{ 
 let toastDom = new ToastConstructor({ 
 el:document.createElement('p') //将toast组件挂载到新创建的p上 
 }) 
 document.body.appendChild( toastDom.$el ) //把toast组件的dom添加到body里 
 
 toastDom.text = text; 
 toastDom.duration = duration; 
 
 // 在指定 duration 之后让 toast消失 
 setTimeout(()=>{ 
 toastDom.isShow = false; 
 }, toastDom.duration); 
} 
export default myToast;

Dann sollte es so aussehen, wenn wir es in Hello.vue aufrufen:

this.$toast('Neuer Inhalt', 2000);Unsere Gruppen-Toast-Komponente kann normal verwendet werden!

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Beispiel für die Datengruppierung von v-for in Vue

Verwenden Sie v-for in vue, um ein zwei- dimensionale Array-Methode

Verwenden Sie Import und Require in JavaScript, um die Prinzipanalyse zu verpacken und zu implementieren

Das obige ist der detaillierte Inhalt vonSo kapseln Sie wiederverwendbare Komponenten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!