Я'вэ динамический вид:
<div id="myview">
<div :is="currentComponent"></div>
</div>
с соответствующим экземпляром вю:
new Vue ({
data: function () {
return {
currentComponent: 'myComponent',
}
},
}).$mount('#myview');
Это позволяет мне динамически менять мой компонент.
В моем случае, у меня есть три разных компонентов: компонент MyComponent
, myComponent1
, и myComponent2
. И я переключаться между ними такой:
Vue.component('myComponent', {
template: "<button @click=\"$parent.currentComponent = 'myComponent1'\"></button>"
}
Теперь, я'd, как передать реквизит myComponent1
.
Как я могу передать эти подпорки, когда я изменить тип компонента myComponent1
?
Чтобы пройти динамично реквизит, вы можете добавить директиву в-привязать к вашему динамического компонента и сдать объект, содержащий опору именами и значениями:
Так что ваши динамической составляющей будет выглядеть так:
<component :is="currentComponent" v-bind="currentProperties"></component>
И в вашем экземпляре вю, `currentProperties может изменяться в зависимости от текущего компонента:
data: function () {
return {
currentComponent: 'myComponent',
}
},
computed: {
currentProperties: function() {
if (this.currentComponent === 'myComponent') {
return { foo: 'bar' }
}
}
}
Так что теперь, когда currentComponent "есть" компонент MyComponent, это
фусобственность, равном
'бар'`. И когда это'т не свойства будут приняты.
Вы также можете обойтись без вычисляемого свойства и встроенного объекта.
в <="был див в-персонализация; и quot{ идентификатор: someProp, 'другие-attr, который': otherProp };></дел>
Показано в документации на V-Персонализация - https://vuejs.org/v2/api/#v-bind
Если вы импортировали вам код требуют
в
var patientDetailsEdit = require('../patient-profile/patient-profile-personal-details-edit')
в и инициализировать экземпляр данных как ниже
в
data: function () {
return {
currentView: patientDetailsEdit,
}
в
вы также можете ссылаться на компонент через свойство name, если вы R компонент доверенность
в
currentProperties: function() {
if (this.currentView.name === 'Personal-Details-Edit') {
return { mode: 'create' }
}
}
в