vue ， как передать значения дочернему компоненту при использовании тега компонента для динамического переключения компонента

Question

Как передать значения дочернему компоненту при использовании тега компонента в vue? Кажется, что я не могу передать значения дочернему компоненту с помощью тега компонента, если не использую v-if:

<component :is="showNow"></component>

Answer 1

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

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

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

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

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

Так что теперь, когда currentComponent равен myComponent, он будет иметь свойство foo, равное 'bar'. А если это не так, никакие свойства не будут переданы.

Answer 2

Вы можете привязать объект поддержки к динамическому компоненту

const props = {
 customProp: 'foo'
}


<component :is="showNow" v-bind="props"></component>