Dynamiczne przekazywanie rekwizytów do dynamicznego komponentu w VueJS

107

Mam dynamiczny widok:

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

z powiązaną instancją Vue:

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

To pozwala mi dynamicznie zmieniać mój komponent.

W moim przypadku, mam trzy różne składniki: myComponent, myComponent1, i myComponent2. I przełączam się między nimi w ten sposób:

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

Teraz chciałbym przekazać rekwizyty myComponent1.

Jak mogę przekazać te właściwości, gdy zmieniam typ komponentu na myComponent1?

— Epitouille
źródło

Przekazujesz rekwizyty poprzez atrybuty elementu propName="propValue". Czy to twoje pytanie?

— dziękuję

Nie mogę, ponieważ nigdy nie piszę <myComponent1 propName="propValue">, zmieniam komponent programowo z$parent.currentComponent = componentName

— Epitouille

Tak, ale piszesz <div :is="currentComponent"></div>. Tam właśnie dodasz atrybut.

— dziękuję

Tak, ale rekwizyty zależą od komponentu. Na przykład, myComponent1weź rekwizyty i myComponent2nie weź rekwizytów

— Epitouille

218

Aby dynamicznie przekazywać właściwości, możesz dodać v-binddyrektywę do swojego komponentu dynamicznego i przekazać obiekt zawierający nazwy i wartości twoich właściwości :

Twój komponent dynamiczny wyglądałby więc tak:

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

A w Twojej instancji Vue currentPropertiesmożesz zmienić na podstawie bieżącego komponentu:

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

Więc teraz, gdy currentComponentjest myComponent, będzie miał foowłaściwość równą 'bar'. A jeśli tak nie jest, żadne właściwości nie zostaną przekazane.

— dzięki: D
źródło

Dlaczego to nie działa dla mnie? Działa z pierwszym komponentem, ale po zmianie „currentComponent” i otrzymuję „e.currentProperties” na komponent potomny.

— Ricardo Vigatti

2

@RicardoVigatti, nie widząc żadnego z twojego kodu, jest to dość trudne do zrozumienia

— dziękuję

Hej, jeśli chcę coś dodać <component>(here)</component>. Czy to możliwe?

— Felipe Morales

1

@FelipeMorales, tak, wystarczy, że zdefiniujesz wartość domyślną <slot>dla każdego dynamicznie renderowanego komponentu. vuejs.org/v2/guide/components-slots.html

— dzięki,

1

Przewodnik po stylach mówi, że nazwy rekwizytów powinny być jak najbardziej szczegółowe. W ten sposób łamie regułę. Z tego też korzystam, ale szukam lepszego rozwiązania.

— Koray Küpe

8

Możesz także obejść się bez obliczonej właściwości i wstawić obiekt.

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

Pokazane w dokumentach na V-Bind - https://vuejs.org/v2/api/#v-bind

— Jquestions
źródło

2

Możesz to zbudować jak ...

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"/>

Rozwiń fragment

— Kornél Takó
źródło

1

Jeśli zaimportowałeś kod za pomocą require

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

Rozwiń fragment

i zainicjuj wystąpienie danych, jak poniżej

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

Rozwiń fragment

możesz również odwoływać się do komponentu poprzez właściwość name, jeśli masz przypisany komponent

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

Rozwiń fragment

— Mark Dowton
źródło