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


104

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

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

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

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

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

:私の場合、私は、3つの異なる要素を持っているmyComponentmyComponent1myComponent2。そして、私はこのようにそれらを切り替えます:

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

では、小道具をに渡したいと思いmyComponent1ます。

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


要素の属性を介して小道具を渡しますpropName="propValue"。それはあなたの質問ですか?
5

記述したことがないのでできません。<myComponent1 propName="propValue">コンポーネントをプログラムで変更します$parent.currentComponent = componentName
Epitouille

ええでも書き<div :is="currentComponent"></div>ます。ここに属性を追加します。
感謝

はい。ただし、小道具はコンポーネントによって異なります。たとえば、myComponent1小道具を受け取り、小道具を取りmyComponent2ません
Epitouille

回答:


212

プロップを動的に渡すには、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' }
    }
  }
}   

そのため、currentComponentisの場合、に等しいプロパティmyComponentがありfooます'bar'。そうでない場合、プロパティは渡されません。


なぜこれがうまくいかないのですか?これは最初のコンポーネントで機能しますが、「currentComponent」を変更した後、「e.currentProperties」が子コンポーネントで定義されていません。
Ricardo Vigatti 2018

2
@RicardoVigattiは、あなたのコードのいずれかを見ることなく、それを知ることはかなり難しい
thanksd

ねえ、に何かを追加したい場合<component>(here)</component>。それは可能ですか?
フェリペモラレス

1
@FelipeMorales、うん、<slot>動的にレンダリングする各コンポーネントのデフォルトを定義する必要があるだけです。vuejs.org/v2/guide/components-slots.html
2018

1
スタイルガイドによると、プロップ名はできるだけ詳細にする必要があります。この方法はルールを破ります。これも私が使っているものですが、もっと良い解決策を探しています。
KorayKüpe18年

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

rコンポーネントに割り当てられている場合は、nameプロパティを通じてコン​​ポーネントを参照することもできます

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.