ส่งผ่านอุปกรณ์ประกอบฉากแบบไดนามิกไปยังองค์ประกอบไดนามิกใน 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?


propName="propValue"คุณผ่านอุปกรณ์ประกอบฉากผ่านแอตทริบิวต์ในองค์ประกอบ นั่นคือคำถามของคุณหรือไม่?
ขอบคุณ

ฉันทำไม่ได้เพราะฉันไม่เคยเขียน<myComponent1 propName="propValue">ฉันเปลี่ยนองค์ประกอบโดยทางโปรแกรมด้วย$parent.currentComponent = componentName
Epitouille

ใช่ <div :is="currentComponent"></div>แต่คุณเขียน นั่นคือที่ที่คุณจะต้องเพิ่มแอตทริบิวต์
ขอบคุณ

ใช่ แต่อุปกรณ์ประกอบฉากขึ้นอยู่กับส่วนประกอบ ตัวอย่างเช่นmyComponent1ใช้อุปกรณ์ประกอบฉากและmyComponent2ไม่ใช้อุปกรณ์ประกอบฉาก
Epitouille

คำตอบ:


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” ไม่ได้กำหนดไว้ในองค์ประกอบลูก
Ricardo Vigatti

2
@RicardoVigatti โดยไม่เห็นรหัสของคุณมันค่อนข้างยากที่จะรู้
ขอบคุณ

Hey, <component>(here)</component>ถ้าฉันต้องการที่จะเพิ่มในบางสิ่งบางอย่าง มันเป็นไปได้?
Felipe Morales

1
@FelipeMorales ใช่คุณเพียงแค่กำหนดค่าเริ่มต้น<slot>สำหรับแต่ละองค์ประกอบที่คุณกำลังแสดงผลแบบไดนามิก vuejs.org/v2/guide/components-slots.html
ขอบคุณ

1
คู่มือสไตล์บอกว่าชื่อเสาควรมีรายละเอียดมากที่สุด วิธีนี้แหกกฎ นี่คือสิ่งที่ฉันใช้เช่นกัน แต่ฉันกำลังมองหาวิธีแก้ปัญหาที่ดีกว่า
Koray Küpe

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

หากคุณนำเข้ารหัสผ่านต้องใช้

var patientDetailsEdit = require('../patient-profile/patient-profile-personal-details-edit')
และกระตุ้นอินสแตนซ์ข้อมูลดังต่อไปนี้

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

คุณยังสามารถอ้างอิงส่วนประกอบผ่านคุณสมบัติชื่อได้หากคุณกำหนดองค์ประกอบไว้

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

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.