Meneruskan alat peraga secara dinamis ke komponen dinamis di VueJS

105

Saya memiliki pandangan dinamis:

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

dengan contoh Vue terkait:

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

Ini memungkinkan saya untuk mengubah komponen saya secara dinamis.

Dalam kasus saya, saya memiliki tiga komponen yang berbeda: myComponent, myComponent1, dan myComponent2. Dan saya beralih di antara mereka seperti ini:

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

Sekarang, saya ingin meneruskan properti ke myComponent1.

Bagaimana saya bisa melewatkan props ini ketika saya mengubah tipe komponen menjadi myComponent1?

— Epitouille
sumber

Anda meneruskan props melalui atribut pada elemen tersebut propName="propValue". Apa itu pertanyaanmu?

— terima kasih

Saya tidak bisa karena saya tidak pernah menulis. <myComponent1 propName="propValue">Saya mengubah komponen secara terprogram dengan$parent.currentComponent = componentName

— Epitouille

Ya tapi Anda menulis <div :is="currentComponent"></div>. Di situlah Anda akan menambahkan atribut.

— terima kasih

Ya, tetapi alat peraga tergantung dari komponennya. Misalnya, myComponent1ambil alat peraga dan myComponent2jangan ambil alat peraga

— Epitouille

213

Untuk meneruskan props secara dinamis, Anda dapat menambahkan v-binddirektif ke komponen dinamis Anda dan meneruskan objek yang berisi nama dan nilai prop Anda:

Jadi komponen dinamis Anda akan terlihat seperti ini:

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

Dan dalam Vue instance Anda, currentPropertiesdapat berubah berdasarkan komponen saat ini:

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

Jadi sekarang, ketika currentComponentada myComponent, itu akan memiliki fooproperti yang sama dengan 'bar'. Dan jika tidak, tidak ada properti yang akan diteruskan.

— terimakasih
sumber

Mengapa ini tidak berhasil untuk saya? Ia bekerja untuk komponen pertama, tetapi setelah saya mengubah "currentComponent" saya mendapatkan "e.currentProperties" tidak ditentukan pada komponen anak.

— Ricardo Vigatti

2

@RicardoVigatti, tanpa melihat satu pun kode Anda, cukup sulit untuk mengetahuinya

— terima kasih

Hei, Jika saya ingin menambahkan sesuatu <component>(here)</component>. Apakah itu mungkin?

— Felipe Morales

1

@FelipeMorales, ya, Anda hanya perlu menentukan default <slot>untuk setiap komponen yang Anda render secara dinamis. vuejs.org/v2/guide/components-slots.html

— terima kasih

1

Panduan gaya mengatakan bahwa nama prop harus sedetail mungkin. Dengan cara ini melanggar aturan. Ini juga yang saya gunakan, tetapi saya mencari solusi yang lebih baik.

— Koray Küpe

8

Anda juga dapat melakukannya tanpa properti yang dihitung dan membuat objek menjadi sebaris.

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

Ditampilkan di dokumen di V-Bind - https://vuejs.org/v2/api/#v-bind

— Jquestions
sumber

2

Anda bisa membangunnya seperti ...

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

Luaskan cuplikan

— Kornél Takó
sumber

1

Jika Anda telah mengimpor kode Anda melalui memerlukan

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

Luaskan cuplikan

dan initalisasikan contoh data seperti di bawah ini

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

Luaskan cuplikan

Anda juga dapat mereferensikan komponen melalui properti name jika Anda r komponen telah ditugaskan

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

Luaskan cuplikan

— Mark Dowton
sumber