ダイナミックコンポーネントにVueが提供するisプロパティとkeep-alive高性能コンポーネント

4521 ワード

テキストリンク:https://blog.csdn.net/helloword182/article/category/9066925?orderby=UpdateTime
ダイナミックコンポーネント

動的コンポーネントとは?変更可能なコンポーネント

Vueで提供されたcomponent+is属性を使用する

動的コンポーネントとはcomponentというコンポーネントのこと

ケース

<div id="app">

  Vue.component('Aa',{
      template: ' Aa 
'
   })

   Vue.component('Bb',{
      template: ' Bb 
'
   })

   new Vue({
      data: {
         type: 'Aa'
      },
      methods: {
         change () {
         this.type = (this.type === 'Aa'?'Bb':'Aa')
         }
      }
   }).$mount('#app')

Vueは、keep-aliveというコンポーネントをブラウザにキャッシュすることで、コンポーネントを切り替えることで使用効率を大幅に向上させることができる

keep-aliveは属性として提示することもできますが、componentを組み合わせると、コンポーネントの形式を使うことをお勧めします

-----------------------------------------------------------------------------------------------------

Vueでフォームデータをコミット

Vue keep-aliveによるページキャッシュ