web-dev-qa-db-ja.com

VueJSの動的コンポーネントに小道具を動的に渡す

私は動的なビューを持っています：

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

関連付けられたVueインスタンス：

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

これにより、コンポーネントを動的に変更できます。

私の場合、myComponent、myComponent1、myComponent2の3つの異なるコンポーネントがあります。そして、私はそれらを次のように切り替えます：

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

さて、myComponent1に小道具を渡したいです。

コンポーネントタイプをmyComponent1に変更するときに、これらの小道具を渡すにはどうすればよいですか？

javascriptvue.jsvuejs2vue-component
58
Epitouille

小道具を動的に渡すには、動的コンポーネントに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の場合、'bar'と等しいfooプロパティが設定されます。そうでない場合、プロパティは渡されません。

131
thanksd

計算されたプロパティを使用せずにオブジェクトをインライン化することもできます。

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

V-Bindのドキュメントに示されています- https://vuejs.org/v2/api/#v-bind

2
Jquestions

インポートした場合、requireを使用してコードを作成します

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' }
                }
            }
1
Mark Dowton