Props'u VueJS'deki dinamik bileşene aktarma

107

Dinamik bir görüşüm var:

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

ilişkili bir Vue örneğiyle:

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

Bu, bileşenimi dinamik olarak değiştirmeme izin veriyor.

Benim durumumda üç farklı bileşene sahibim: myComponent , myComponent1, ve myComponent2. Ve aralarında şu şekilde geçiş yapıyorum:

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

Şimdi, sahne malzemelerini geçmek istiyorum myComponent1.

Bileşen türünü şu şekilde değiştirdiğimde bu desteği nasıl geçebilirim? myComponent1 ?

— Epitouille
kaynak

Öğedeki öznitelikler aracılığıyla sahne aktarırsınız propName="propValue". Sorunuz bu mu?

— teşekkürler

<myComponent1 propName="propValue">$parent.currentComponent = componentName

— Yapamıyorum

Evet ama yazıyorsun <div :is="currentComponent"></div>. Özniteliği burada ekleyeceksiniz.

— teşekkürler

Evet, ancak aksesuarlar bileşene bağlıdır. Örneğin, myComponent1sahne alın ve sahne myComponent2almayın

— Epitouille

218

Props'u dinamik olarak geçirmek için, v-bindyönergeyi dinamik bileşeninize ekleyebilir ve prop adlarınızı ve değerlerinizi içeren bir nesneyi iletebilirsiniz:

Yani dinamik bileşeniniz şöyle görünecektir:

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

Ve Vue örneğinizde, currentPropertiesmevcut bileşene göre değişebilir:

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

Yani şimdi, currentComponentise myComponent, kırmızı bir arka plan fooiçin eşit özelliği 'bar'. Ve olmadığı zaman, hiçbir mülk devredilmez.

— teşekkürler: D
kaynak

Bu neden benim için çalışmıyor? İlk bileşen için çalışıyor, ancak "currentComponent" i değiştirdikten sonra bir "e.currentProperties" alıyorum, alt bileşende tanımsız.

— Ricardo Vigatti

2

@RicardoVigatti, herhangi bir kodunuzu görmeden bilmek oldukça zor

— teşekkürler

Hey, bir şey eklemek istersem <component>(here)</component>. Bu mümkün mü?

— Felipe Morales

1

@FelipeMorales, evet, <slot>dinamik olarak oluşturduğunuz her bileşen için bir varsayılan tanımlamanız gerekir . vuejs.org/v2/guide/components-slots.html

— teşekkürlerd

1

Stil kılavuzu, prop adlarının olabildiğince ayrıntılı olması gerektiğini söylüyor. Bu şekilde kuralı çiğniyor. Bu da kullandığım şey ama daha iyi bir çözüm arıyorum.

— Koray Küpe

8

Ayrıca hesaplanmış özellik olmadan ve nesneyi satır içi olarak da yapabilirsiniz.

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

V-Bind'deki belgelerde gösterilmiştir - https://vuejs.org/v2/api/#v-bind

— Jquestions
kaynak

2

Bunu şöyle inşa edebilirsin ...

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

Snippet'i genişlet

— Kornél Takó
kaynak

1

Kodunuzu required yoluyla içe aktardıysanız

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

Snippet'i genişlet

ve aşağıdaki gibi veri örneğini başlangıç durumuna getirin

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

Snippet'i genişlet

Eğer bileşene atanmışsa, bileşene name özelliği aracılığıyla da başvurabilirsiniz.

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

Snippet'i genişlet

— Mark Dowton
kaynak