Vueコンポーネントの動的コンポーネントの詳細な説明

<!-- DynamicComponent.vue -->
<テンプレート>
  <セクション>
    <div v-for="(item, index) in componentData" :key="index">
      <components :is='item.componentName' :params="item.content" />
    </div>
  </セクション>
</テンプレート>
<スクリプト>
'./pageComponents/PageOne' から PageOne をインポートします。
'./pageComponents/PageTwo' から PageTwo をインポートします。
'./pageComponents/PageThree' から PageThree をインポートします。
エクスポートデフォルト{
  名前: 'DynamicComponent',
  コンポーネント:
    ページワン、
    ページ2、
    ページ3
  },
  データ （） {
    戻る {
      コンポーネントデータ: [
        {
          コンポーネント名: 'PageOne',
          コンテンツ： {
            タイトル: 'タイトル1'
          }
        },
        {
          コンポーネント名: 'PageTwo',
          コンテンツ： {
            タイトル: 'タイトル2'
          }
        }
      ]
    }
  }
}
</スクリプト>

<!-- ページ 1 -->
<テンプレート>
  <セクション>
    {{コンテンツ}}
  </セクション>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'PageOne'、
  小道具: {
    パラメータ: {
      タイプ: オブジェクト、
      デフォルト: function(){
        戻る {}
      }
    }
  },
  データ （） {
    戻る {
      コンテンツ: this.params.title
    }
  },
  時計：
    パラメータ: {
      ハンドラ(newVal, oldVal){
        this.content = newVal.title
      },
      深い：本当、
      即時: 真
    }
  }
}
</スクリプト>

<!-- ページ2 -->
<テンプレート>
  <セクション>
    {{コンテンツ}}
  </セクション>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'PageTwo',
  小道具: {
    パラメータ: {
      タイプ: オブジェクト、
      デフォルト: function(){
        戻る {}
      }
    }
  },
  データ （） {
    戻る {
      コンテンツ: this.params.title
    }
  },
  時計：
    パラメータ: {
      ハンドラ(newVal, oldVal){
        this.content = newVal.title
      },
      深い：本当、
      即時: 真
    }
  }
}
</スクリプト>

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

配列が変更されると、対応するデータを動的にロードします

シナリオ: 異なるコンポーネント名をクリックすると、対応するコンポーネントがインターフェイスに表示されます。

ステップ1 : 必要なコンポーネントをインポートする

ステップ2 : タブをクリックして、対応するコンポーネント名を配列に追加します。

ステップ3 : 動的コンポーネントを使用し、:is属性をコンポーネント名にバインドする

<div v-for="(item, index) in componentData" :key="index">
  <コンポーネント:is="item.componentName"/>
</div>

例: オブジェクトのプロパティ変更の監視、詳細な監視

<!-- DynamicComponent.vue -->
<テンプレート>
  <セクション>
    <div v-for="(item, index) in componentData" :key="index">
      <components :is='item.componentName' :params="item.content" />
    </div>
  </セクション>
</テンプレート>
<スクリプト>
'./pageComponents/PageOne' から PageOne をインポートします。
'./pageComponents/PageTwo' から PageTwo をインポートします。
'./pageComponents/PageThree' から PageThree をインポートします。
エクスポートデフォルト{
  名前: 'DynamicComponent',
  コンポーネント:
    ページワン、
    ページ2、
    ページ3
  },
  データ （） {
    戻る {
      コンポーネントデータ: [
        {
          コンポーネント名: 'PageOne',
          コンテンツ： {
            タイトル: 'タイトル1'
          }
        },
        {
          コンポーネント名: 'PageTwo',
          コンテンツ： {
            タイトル: 'タイトル2'
          }
        }
      ]
    }
  }
}
</スクリプト>

<!-- ページ 1 -->
<テンプレート>
  <セクション>
    {{コンテンツ}}
  </セクション>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'PageOne'、
  小道具: {
    パラメータ: {
      タイプ: オブジェクト、
      デフォルト: function(){
        戻る {}
      }
    }
  },
  データ （） {
    戻る {
      コンテンツ: this.params.title
    }
  },
  時計：
    パラメータ: {
      ハンドラ(newVal, oldVal){
        this.content = newVal.title
      },
      深い：本当、
      即時: 真
    }
  }
}
</スクリプト>

<!-- ページ2 -->
<テンプレート>
  <セクション>
    {{コンテンツ}}
  </セクション>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'PageTwo',
  小道具: {
    パラメータ: {
      タイプ: オブジェクト、
      デフォルト: function(){
        戻る {}
      }
    }
  },
  データ （） {
    戻る {
      コンテンツ: this.params.title
    }
  },
  時計：
    パラメータ: {
      ハンドラ(newVal, oldVal){
        this.content = newVal.title
      },
      深い：本当、
      即時: 真
    }
  }
}
</スクリプト>