Chuyển đạo cụ động đến thành phần động trong VueJS

Tôi có một chế độ xem động:

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

với một phiên bản Vue được liên kết:

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

Điều này cho phép tôi thay đổi thành phần của mình một cách linh hoạt.

Trong trường hợp của tôi, tôi có ba thành phần khác nhau: myComponent, myComponent1, và myComponent2. Và tôi chuyển đổi giữa chúng như thế này:

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

Bây giờ, tôi muốn chuyển các đạo cụ cho myComponent1.

Làm cách nào để chuyển các đạo cụ này khi tôi thay đổi loại thành phần myComponent1?

Để chuyển động các đạo cụ, bạn có thể thêm v-bindchỉ thị vào thành phần động của mình và chuyển một đối tượng chứa tên và giá trị hỗ trợ của bạn:

Vì vậy, thành phần động của bạn sẽ giống như sau:

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

Và trong phiên bản Vue của bạn, currentPropertiescó thể thay đổi dựa trên thành phần hiện tại:

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

Vì vậy, bây giờ, khi currentComponentcó myComponent, nó sẽ có một footài sản bằng 'bar'. Và khi không có, sẽ không có thuộc tính nào được chuyển.

Bạn cũng có thể làm mà không cần thuộc tính tính toán và đối tượng nội tuyến.

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

Được hiển thị trong tài liệu trên V-Bind - https://vuejs.org/v2/api/#v-bind

Bạn có thể xây dựng nó như ...

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

Nếu bạn đã nhập mã của bạn thông qua yêu cầu

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

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

bạn cũng có thể tham chiếu thành phần thông qua thuộc tính name nếu thành phần r của bạn đã gán nó

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