Dieses Mal werde ich Ihnen die Verwendung der benutzerdefinierten dynamischen Komponenten von vue ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Verwendung der benutzerdefinierten dynamischen Komponenten von vue?
Nach dem Erlernen des Vue-Familien-Buckets und einiger Benutzeroberflächen reicht es im Grunde aus, aber die Verwendung von Komponenten in Form von Elementen ist immer noch nicht flexibel genug. Beispielsweise müssen wir die Komponenten stattdessen direkt über JS-Code aufrufen Verwenden Sie jedes Mal Attribute auf der Seite. Lassen Sie uns darüber sprechen, wie dynamische Komponenten definiert werden.
Vue.extend
Die Idee ist, den Konstruktor der Komponente abzurufen, damit wir neue erstellen können. Und Vue.extend kann es tun: https://cn.vuejs.org/v2/api/#Vue-extend
1 2 3 4 5 6 7 8 9 | template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>' ,
data: function () { return {
firstName: 'Walter' ,
lastName: 'White' ,
alias: 'Heisenberg'
}
}
})
|
Nach dem Login kopieren
Der Beamte liefert dieses Beispiel, nehmen wir ein Schauen Sie sich „Transformieren“ an und erstellen Sie ein einfaches Nachrichtenfeld.
Dynamische Komponentenimplementierung
Erstellen Sie eine Vue-Datei. widgets/alert/src/main.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <template>
<transition name= "el-message-fade" ><p v-show= "visible" class = "my-msg" >{{message}}</p>
</transition></template><script >
export default {
data(){ return {
message: '' ,
visible:true
}
},
methods:{
close(){
setTimeout(()=>{ this.visible = false; },2000)
},
},
mounted() { this.close();
}
}</script>
|
Nach dem Login kopieren
Dies ist die Zusammensetzung unserer Komponente. Wenn es sich um den ersten Abschnitt handelt, können wir ihn in das Komponentenobjekt einfügen und verwenden, aber hier müssen wir ihn über den Konstruktor erstellen. Erstellen Sie ein weiteres widgets/alert/src/main.js
1 2 3 4 5 6 7 8 9 10 11 | import Vue from 'vue' ;
let MyMsgConstructor = Vue.extend( require ( './main.vue' ));
let instance; var MyMsg= function (msg){
instance= new MyMsgConstructor({
data:{
message:msg
}})
document.body.appendChild(instance. $el ) return instance;
}
export default MyMsg;
|
Nach dem Login kopieren
require('./main.vue') gibt ein anfängliches Komponentenobjekt zurück, das den Optionen in Vue.extend( Optionen) entspricht. Dieser Ort entspricht dem folgenden Code:
1 | import alert from './main.vue' let MyMsgConstructor = Vue.extend(alert);
|
Nach dem Login kopieren
und MyMsgConstructor lautet wie folgt.

Beziehen Sie sich auf this._init im Quellcode. Die Parameter werden zusammengeführt und dann gemäß dem Lebenszyklus ausgeführt:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | Vue.prototype._init = function (options) {
...
if (options && options._isComponent) {
} else {
vm. $options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
);
}
vm._self = vm;
initLifecycle(vm);
initEvents(vm);
initRender(vm);
callHook(vm, 'beforeCreate' );
initInjections(vm);
initProvide(vm);
callHook(vm, 'created' ); ... if (vm. $options .el) { vm. $mount (vm. $options .el);
}
};
|
Nach dem Login kopieren
Der Zweck des Aufrufs von $mount() besteht darin, eine Mount-Instanz zu erhalten. Dieses Beispiel ist Instanz.$el.

Sie können das el-Objekt in der -Konstruktionsmethode übergeben (beachten Sie, dass der Markierungsteil im obigen Quellcode auch vm.$mount gemountet ist (vm .$options.el), aber wenn Sie el nicht übergeben, gibt es nach new kein $el-Objekt, daher müssen Sie $mount() manuell aufrufen. Diese Methode kann die Element-ID direkt übergeben > Dieses el kann nicht direkt in die Vue-Datei geschrieben werden und es wird ein Fehler gemeldet. Als nächstes können wir es einfach als Vue-Objekt festlegen und
1 2 3 4 5 | instance= new MessageConstructor({
el: ".leftlist" ,
data:{
message:msg
}})
|
Nach dem Login kopieren
aufrufen, um unsere Komponente in main.js einzuführen :
Dann testen Sie es auf der Seite:
Methoden:{
test(){
this.$mymsg("hello vue ");
1 | <el-button type= "primary" @click='test'>主要按钮</el-button>
|
Nach dem Login kopieren
}
}
Dies implementiert die grundlegende Parameterübergabe. Am besten entfernen Sie das Element in der Close-Methode:
Rückrufverarbeitung
Rückrufe und Parameter sind ähnlich und können direkt im Konstruktor übergeben werden: Ändern Sie zunächst die close-Methode in main.vue:
1 2 3 4 | close(){
setTimeout(()=>{ this.visible = false; this. $el .parentNode.removeChild(this. $el );
},2000)
},
|
Nach dem Login kopieren
Wenn die onClose-Methode vorhanden ist, Dieser Rückruf wird jedoch im Ausgangszustand nicht ausgeführt. Dann können Sie
hier mit den ursprünglichen Parametern zusammenführen. Zu diesem Zeitpunkt können Sie den aufrufenden Ort ändern, um den Rückruf auszuführen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | export default {
data(){ return {
message: '' ,
visible:true
}
},
methods:{
close(){
setTimeout(()=>{ this.visible = false; this. $el .parentNode.removeChild(this. $el ); if (typeof this.onClose === 'function' ) { this.onClose(this);
}
},2000)
},
},
mounted() { this.close();
}
}
|
Nach dem Login kopieren
Sie können die Close-Methode direkt neu schreiben, dies wird jedoch nicht empfohlen, da dies die vorherige Logik durcheinander bringen und zu Duplikaten führen kann. Codierung. Jetzt ist es viel flexibler
1 2 3 4 5 6 7 8 9 | var MyMsg= function (msg,callback){
instance= new MyMsgConstructor({
data:{
message:msg
},
methods:{
onClose:callback
}
})
|
Nach dem Login kopieren
Einheitliche Verwaltung
1 2 3 4 | test(){ this. $mymsg ( "hello vue" ,()=>{
console.log( "closed.." )
});
},
|
Nach dem Login kopieren
Wenn die Anzahl der benutzerdefinierten dynamischen Komponenten zunimmt, wird es sehr umständlich, sie einzeln in main.js hinzuzufügen, also hier Wir können. Widgets bieten einen einheitlichen Ausgang für die einfache Wiederverwendung in der Zukunft
und registrieren Sie alle benutzerdefinierten Komponenten über Vue.component Da Sie als nächstes Vue.use verwenden müssen, muss die Methode
bereitgestellt werden ein Parameter von Vue.
也就是把所有的组件当插件提供:在main.js中加入下面的代码即可。
1 2 3 | ...
import VueResource from 'vue-resource' import Widgets from './Widgets/index.js' ...
Vue. use (Widgets)
|
Nach dem Login kopieren
这样就很简洁了。
小结: 通过Vue.extend和Vue.use的使用,我们自定义的组件更具有灵活性,而且结构很简明,基于此我们可以构建自己的UI库。以上来自于对Element源码的学习。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
protobuf.js 与 Long.js的使用详解
有趣的UglifyJS
h5做出网页录音功能
css3怎样做出逆时针旋转倒计时
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung benutzerdefinierter dynamischer Komponenten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!