[解決済み] VueJSで動的なコンポーネントに動的にpropsを渡す

質問

ダイナミックビューにしました。

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

と、関連するVueインスタンス。

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

これによって、コンポーネントをダイナミックに変化させることができるんだ。

私の場合、3種類のコンポーネントを持っています。 myComponent , myComponent1 そして myComponent2 . そして、こんな風に切り替えています。

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

今、私は、次の人に小道具を渡したいと思っています。 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' . そして、そうでないときは、何のプロパティも渡されません。