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

107

У меня динамическое представление:

<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?

— Эпитуй
источник

Вы передаете реквизиты через атрибуты элемента propName="propValue". Это твой вопрос?

— спасибо

Я не могу, потому что я никогда не пишу, <myComponent1 propName="propValue">я программно меняю компонент с помощью$parent.currentComponent = componentName

— Epitouille

Да, но ты пишешь <div :is="currentComponent"></div>. Вот где вы должны добавить атрибут.

— спасибо

Да, но реквизит зависит от компонента. Например, myComponent1возьмите реквизит и myComponent2не возьмите реквизит

— Эпитуй,

218

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

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

<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'. А когда это не так, никакие свойства не передаются.

— Спасибо д
источник

Почему у меня это не работает? Он работает для первого компонента, но после того, как я изменю «currentComponent», я получаю, что «e.currentProperties» не определено для дочернего компонента.

— Рикардо Вигатти

2

@RicardoVigatti, не видя вашего кода, это довольно сложно узнать

— спасибо

Эй, если я хочу что-то добавить <component>(here)</component>. Это возможно?

— Фелипе Моралес

1

@FelipeMorales, да, вам просто нужно определить значение <slot>по умолчанию для каждого компонента, который вы динамически визуализируете. vuejs.org/v2/guide/components-slots.html

— спасибо

1

В руководстве по стилю сказано, что имена свойств должны быть максимально подробными. Таким образом нарушается правило. Я тоже этим пользуюсь, но ищу лучшее решение.

— Корай Купе

8

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

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

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

— Вопросы
источник

2

Вы могли бы построить это как ...

comp: { component: 'ComponentName', props: { square: true, outlined: true, dense: true }, model: 'form.bar' }

<component :is="comp.component" v-bind="{...comp.props}" v-model="comp.model"/>

Развернуть фрагмент

— Корнел Тако
источник

1

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

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

Развернуть фрагмент

и инициализировать экземпляр данных, как показано ниже

data: function () {
            return {
                currentView: patientDetailsEdit,
            }

Развернуть фрагмент

вы также можете ссылаться на компонент через свойство name, если он назначен вашему компоненту

currentProperties: function() {
                if (this.currentView.name === 'Personal-Details-Edit') {
                    return { mode: 'create' }
                }
            }

Развернуть фрагмент

— Марк Даутон
источник