VueJS의 동적 구성 요소에 동적으로 소품 전달

동적보기가 있습니다.

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

이제 props를 myComponent1.

컴포넌트 유형을로 변경할 때 이러한 소품을 어떻게 전달할 수 myComponent1있습니까?

동적으로 소품을 전달하려면 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'. 그렇지 않으면 속성이 전달되지 않습니다.

계산 된 속성 없이도 할 수 있고 객체를 인라인 할 수 있습니다.

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

V-바인딩의 문서에 표시 - https://vuejs.org/v2/api/#v-bind

당신은 그것을 만들 수 있습니다 ...

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

필요를 통해 코드를 가져온 경우

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

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

구성 요소에 할당 된 경우 name 속성을 통해 구성 요소를 참조 할 수도 있습니다.

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