I've pandangan dinamis:
<div id="myview">
<div :is="currentComponent"></div>
</div>
dengan terkait Vue contoh:
new Vue ({
data: function () {
return {
currentComponent: 'myComponent',
}
},
}).$mount('#myview');
Hal ini memungkinkan saya untuk mengubah saya komponen dinamis.
Dalam kasus saya, saya memiliki tiga komponen yang berbeda: myComponent
, myComponent1
, dan myComponent2
. Dan aku beralih di antara mereka seperti ini:
Vue.component('myComponent', {
template: "<button @click=\"$parent.currentComponent = 'myComponent1'\"></button>"
}
Sekarang, aku'd ingin lulus alat peraga untuk myComponent1
.
Bagaimana saya bisa lulus alat peraga ini ketika saya mengubah jenis komponen untuk myComponent1
?
Untuk lulus alat peraga secara dinamis, anda dapat menambahkan v-mengikat
direktif untuk anda yang dinamis komponen dan melewati sebuah objek yang berisi prop nama dan nilai-nilai:
Jadi anda yang dinamis komponen akan terlihat seperti ini:
<component :is="currentComponent" v-bind="currentProperties"></component>
Dan di Vue contoh, currentProperties
dapat berubah berdasarkan komponen arus:
data: function () {
return {
currentComponent: 'myComponent',
}
},
computed: {
currentProperties: function() {
if (this.currentComponent === 'myComponent') {
return { foo: 'bar' }
}
}
}
Jadi sekarang, ketika currentComponent
adalah myComponent
, itu akan memiliki foo
properti sebesar 'bar'
. Dan ketika itu isn't, tidak ada sifat-sifat yang akan diwariskan.
Anda juga dapat melakukannya tanpa dihitung properti dan inline objek.
<div v-bind="{ id: someProp, 'lain-attr': otherProp"></div>
Ditunjukkan dalam dokumen V-Mengikat - https://vuejs.org/v2/api/#v-bind
Jika anda telah mengimpor kode anda melalui memerlukan
var patientDetailsEdit = require('../patient-profile/patient-profile-personal-details-edit')
dan initalize data contoh seperti di bawah ini
data: function () {
return {
currentView: patientDetailsEdit,
}
anda juga dapat referensi komponen melalui nama properti jika anda r komponen yang telah ditetapkan
currentProperties: function() {
if (this.currentView.name === 'Personal-Details-Edit') {
return { mode: 'create' }
}
}