Динамическая передача реквизита динамическому компоненту в 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?

javascript vue.js vuejs2 vue-component Эпитуй
источник
Вы передаете реквизиты через атрибуты элемента 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' }
                }
            }
Развернуть фрагмент

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