Динамическое перемещение реквизита динамического компонента в VueJS

У меня динамический вид:

<div id="myview">
  <div :is="currentComponent"></div>
</div>

с соответствующим экземпляром Vue:

new Vue ({
  data: function () {
    return {
      currentComponent: 'myComponent',
    }
  },
}).$mount('#myview');

Это позволяет мне динамически менять свой компонент.

В моем случае у меня есть три разных компонента: myComponent, myComponent1 и myComponent2. И я переключаюсь между ними следующим образом:

Vue.component('myComponent', {
  template: "<button @click=\"$parent.currentComponent = 'myComponent1'\"></button>"
}

Теперь я хотел бы передать реквизит на myComponent1.

Как передать эти реквизиты, когда я меняю тип компонента на myComponent1?

Ответ 1

Чтобы динамически передавать реквизиты, вы можете добавить директиву v-bind к вашему динамическому компоненту и передать объект, содержащий ваши имена и значения prop:

Таким образом, ваш динамический компонент будет выглядеть так:

<component :is="currentComponent" v-bind="currentProperties"></component>

И в вашем экземпляре Vue currentProperties может измениться на основе текущего компонента:

data: function () {
  return {
    currentComponent: 'myComponent',
  }
},
computed: {
  currentProperties: function() {
    if (this.currentComponent === 'myComponent') {
      return { foo: 'bar' }
    }
  }
}

Итак, теперь, когда currentComponent является myComponent, он будет иметь свойство foo равное 'bar'. И когда это не так, никаких свойств не будет.

Ответ 2

Если вы импортировали код через require

var patientDetailsEdit = require('../patient-profile/patient-profile-personal-details-edit')

Ответ 3

Вы также можете обойтись без вычисляемого свойства и встроенного объекта.

<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

Показано в документах на V-Bind - https://vuejs.org/v2/api/#v-bind