vue.jsにコンポーネントを導入する方法

vue.jsにコンポーネントを導入する方法: 1. カスタムコンポーネント用のフォルダーを作成する; 2. 追加するページに導入するモジュールを追加する; 3.index.vueにモジュールを導入する; 4 . 、index.vue ページでコンポーネントを導入するだけです。

#具体的な手順は次のとおりです:

(関連ビデオの推奨事項:

jquery ビデオ チュートリアル)

1 , まず、プロジェクトにカスタム コンポーネントを配置するためのフォルダーを作成します (コンポーネントの下に共通に配置しました。この記事では例として table.vue を使用します)

2. 次に、キャメルケースの命名方法に注意して、追加したいページに導入するモジュールを追加します (この記事では、たとえば、 とします。テーブルモジュールを定義する 名前: v-table を定義するため、引用する場合はテーブルモジュールで定義された名前も使用する必要があります);

3. 次に、 index.vue table.vue モジュール

//index.vue 页面 ，引入v-table模块
<div class="table">
    <v-table></v-table> //这就是你引入的自定义模块；注意是驼峰命名法
</div>

4 を導入します。このコンポーネントをindex.vue ページに導入します (注: table.vue、モジュール をindex.vue ページに追加しました) HTML タグではありません。実際、vue では新しいサブコンポーネントが導入されています)

//index.vue
<script>
  import vTable from &#39;../../components/common/table&#39;  //table.vue（注意，我在index.vue页面中添加了模块<v-table>,不是html标签，其实就是vue引入新的子组件）
    export default {
        name: "index",
      components: {
            vTable
        },
    }
</script>

ヒント: 率直に言うと、カスタム コンポーネントはカプセル化のようなもので、いくつかのパブリック モジュールを抽出して、それらを別のツール コンポーネントまたはページに書き込むものです。必要に応じて、カスタム コンポーネントはカプセル化のようなもので、ページに直接インポートするだけです。

また、同じページにコードを書きすぎて後のメンテナンスが不便になることを防ぐために、ページ全体を複数の小さなモジュールに分割し、それらのモジュールをメインに導入することができます。ページを作成し、作成には導入部分が含まれます。手順はすべて同じです。

例:

関連する推奨事項:

vue.js チュートリアル

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