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?

javascript vue.js vuejs2 vue-component 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

Jawaban:

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