Vue.js で動的コンポーネントを使用する方法

この記事では、Vue.js のコンポーネントで HTML 要素を参照する方法について説明します。 Vue Router を使用するか、動的コンポーネントを作成することで、ビューやコンポーネント テンプレートを切り替えることができます。

Vue Router は、DOM 内のビューまたはコンポーネント テンプレート間を移動するために使用されます。 Vue Router を使用するには、ルート コンポーネントでルートを定義し、新しいコンポーネントをイベント (クリックなど) にマウントする必要があることを Vue に指示します。

これは、ユーザー インターフェイス内のサイドバーおよびメニュー コンポーネントのナビゲーションを処理する正しい方法です。

ルートを作成せずに、DOM にマウントされた 2 つの任意のコンポーネント間を切り替える場合は、動的コンポーネントを使用するとよいでしょう。

動的コンポーネント

Vue 動的コンポーネントを使用すると、ユーザーはルーティングを行わずに 2 つ以上のコンポーネント間を切り替えることができます。初期化時にデータ状態を保持します。コンポーネント。

中心となるアイデアは、ユーザーがルーターを使用せずにユーザー インターフェイスでコンポーネントを動的にマウントおよびアンインストールできるようにすることです。

なぜ動的コンポーネントが重要ですか?

ユーザー インターフェイスを設計するときは、アプリケーションに基づいて表示または非表示を切り替えるための何らかの柔軟性が必要です。プログラム状態のネストされたコンポーネント。動的コンポーネントは、このプラットフォームを効率的かつ簡単な方法で提供します。

この機能を使用すると、v-if や v-else などの Vue 条件構造を使用して動的コンポーネントを簡単に実装できるため、多くのコードを節約できます。条件付き構造を使用して動的コンポーネントを実装するには、プレースホルダーを使用してロジックをコンポーネントに簡単にバインドします。

このアプローチにより、プレゼンテーションが常にクリーンで明確になります。

Vue で動的コンポーネントを作成できます。コンピューターに次の情報が必要です:

Node.js バージョン 10.x 以降がインストールされていること。ターミナル/コマンド プロンプトで次のコマンドを実行すると、Node.js バージョン 10.x があることを確認できます。

node -v

コード エディター (Visual Studio を推奨)。

Vue の最新バージョン。コンピュータにグローバルにインストールされます。

Vue CLI 3.0 がコンピューターにインストールされています。これを行うには、まず古い CLI バージョンをアンインストールします:

npm uninstall -g vue-cli

次に、新しいバージョンをインストールします:

npm install -g @vue/cli

動的コンポーネントの構文

Vue は、component と呼ばれる動的コンポーネント用の特別なテンプレート要素を提供します。構文は次のとおりです。

<component v-bind:is=”currentComponent”></component>

コンポーネント要素は、自己終了タグにすることもできます。

<component v-bind:is=”currentComponent”/>

最初のオプションは、ブラウジングの互換性にとって最適です。

デモ

スターター プロジェクトをダウンロードし、VS Code で開き、動的コンポーネントの例をいくつか取得します。 starter プロジェクトを使用すると、既存のテスト コンポーネントにアクセスし、2 番目のテスト コンポーネントを作成し、その 2 つを切り替えることができます。

components フォルダーに移動し、新しいファイルを作成します。ファイルに Test2.vue という名前を付け、次のコード ブロックをファイルにコピーします。

<template>
  <div><h1>I am Test 2</h1>
  </div>
</template>
<script>
export default {
  name: &#39;Test2&#39;,
  props: {
    msg: String
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

これで 2 番目のコンポーネントが完成したので、App.vue ファイルに移動し、コンポーネントを登録します:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test />
    <Test2 />
  </div>
</template>
<script>
import Test from &#39;./components/Test.vue&#39;
import Test2 from &#39;./components/Test2.vue&#39;
export default {
  name: &#39;app&#39;,
  components: {
    Test, Test2
  }
}
</script>

これで、2 つのテスト コンポーネントがルート アプリケーション コンポーネント内にネストされます。 1 つのコンポーネントをマウントし、別のコンポーネントに動的に切り替えたい場合は、動的コンポーネントを作成する必要があります。

次のコード ブロックを app.vue ファイルのテンプレート セクションにコピーします:

<template>
   <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <component is="Test" />
   </div>
</template>

次に、次の serve を使用してアプリケーションを実行します。 command :

npm run serve

Test 1 コンポーネントのみが表示されていることがわかります。

これは、テンプレートに Test 1 要素のみが指定されている場合に得られる応答とまったく同じです。コンポーネントを動的にするには、v-bind ディレクティブを使用してコンポーネントを set プロパティにバインドします。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <component v-bind:is="component" />
  </div>
</template>
<script>
import Test from &#39;./components/Test.vue&#39;
import Test2 from &#39;./components/Test2.vue&#39;
export default {
  name: &#39;app&#39;,
  components: {
    Test, Test2
  },
  data (){
    return {
      component:"Test"
    }
  }
}
</script>

これで、コンポーネントはデータ内のコンポーネント プロパティにバインドされました。コンポーネントを Test2 に切り替えると、Test2 コンポーネントが自動的にマウントされます。

ブラウザでテストします。

#メソッド呼び出しの追加

メソッド呼び出しを追加して、コンポーネントの動的表示のロジックを制御できます。コンポーネント要素を使用すると、Vue インスタンス内のすべての構造にアクセスできます。

以下は、これら 2 つのコンポーネントを切り替える簡単なメソッドの例です。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <component v-bind:is="component" />
    <button v-on:click="toggle">Toggle</button>
  </div>
</template>
<script>
import Test from &#39;./components/Test.vue&#39;
import Test2 from &#39;./components/Test2.vue&#39;
export default {
  name: &#39;app&#39;,
  components: {
    Test,
     Test2
  },
  data (){
    return {
      component:"Test2"
    }
  },
  methods: {
    toggle(){
      if (this.component === Test) {
        this.component = Test2;
      } else {
        this.component = Test;
      }
    }
  }
}
</script>

切り替え時にデータ値を有効に保つ

Vue チームがこの機能を構築したとき、各状態のデータ値の保存を含めるように機能を拡張することを選択しました。

このデータを保存するために、Vue は

keep-alive という名前のテンプレート要素を提供します。 keep-alive を使用すると、あるコンポーネントから別のコンポーネントに切り替えた後も、コンポーネントの状態がそのまま維持されることを保証できます。

たとえば、リンクをクリックするかテキスト ボックスに値を入力してコンポーネントを切り替えると、

keep-alive により、以前使用していた場所と同じ場所に戻ります。リンクまたはテキスト ボックスを元に戻します。

keep-alive を有効にするには、app.vue ファイルのテンプレート セクションに移動し、コンポーネント要素を keep-alive## で囲みます。 ＃ 要素 ：＃＃＃

<keep-alive>
  <component v-bind:is="component" />
</keep-alive>

要查看它是否工作，请将表单元素添加到测试中。vue文件，在模板部分添加如下代码块:

<template>
  <div><h1>I am Test 1</h1>
       <form>
         First name:<br>
         <input type="text" name="firstname"><br>
         Last name:<br>
         <input type="text" name="lastname">
       </form>
  </div>
</template>

保存所有项目文件后，再次运行应用程序。在输入框中键入，切换组件，并切换回原始组件。您将注意到在切换组件之前输入的值与之前输入的值完全相同。

结论

本文介绍了如何在Vue.js工作流中使用动态组件。您现在还可以通过keep-alive扩展组件元素的能力。

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

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