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

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

---

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

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

참고 URL : https://stackoverflow.com/questions/43658481/passing-props-dynamically-to-dynamic-component-in-vuejs