Динамічний перехід реквізиту до динамічного компонента у VueJS

105

Я динамічний погляд:

<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не приймайте реквізит

— Epitouille

213

Щоб динамічно передавати реквізит, ви можете додати 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

Якщо ви імпортували код через попит

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

Розгорніть фрагмент

і ініціалізувати екземпляр даних, як показано нижче

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

Розгорніть фрагмент

Ви також можете посилатись на компонент через властивість імені, якщо у вас компонент r призначений

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

Розгорніть фрагмент

— Марк Даутон
джерело