Vue.js のコンポーネント間の通信 - 動的コンポーネント

今回は、Vue.jsのコンポーネント間通信 - 動的コンポーネント、Vue.jsを使用したコンポーネント間通信 - 動的コンポーネントについてお届けします 注意点は何ですか 実際のケースを紹介しますので、見てみましょう。

予約済みの 要素を使用し、その is 属性を動的にバインドすることで、同じマウント ポイント上の複数のコンポーネントを動的に切り替えることができます:

var vm = new Vue({
  el: '#example',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

<component v-bind:is="currentView">
  <!-- 组件在 vm.currentview 变化时改变！ -->
</component>

コンポーネント オブジェクトに直接バインドすることもできます:

var Home = {
  template: &#39;<p>Welcome home!</p>&#39;
}
var vm = new Vue({
  el: &#39;#example&#39;,
  data: {
    currentView: Home
  }
})

keep-alive

切り替えられたコンポーネントをメモリ内に保持すると、その状態を保持したり、再レンダリングを回避したりできます。この目的のために、キープアライブ コマンド パラメータを追加できます:

<keep-alive>
  <component :is="currentView">
    <!-- 非活动组件将被缓存！ -->
  </component>
</keep-alive>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue.js の計算プロパティとデータ監視

Vue.js イベント バインディング - フォーム イベント バインディング

以上がVue.js のコンポーネント間の通信 - 動的コンポーネントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。