Vue.jsでのコンポーネントの作成と登録方法の紹介

この記事では、Vue.js でのコンポーネントの作成と登録方法について説明します。必要な方は参考にしていただければ幸いです。

使用前に作成します

コンポーネントファイルの下に独自のコンポーネントファイル(.vue)を作成します

初期構造は次のとおりです

<!--html区域-->
<template>
    
</template>

<!--JS区域-->
<script>
    export default {
        name: "hw"
    }
</script>

<!--css区域-->
<style scoped>

</style>

独自のコード設定を追加して、単純なサブコンポーネントファイルの作成を完了します

<!--html区域-->
<template>
    <p class="hw">
      {{ name }}
    </p>
</template>

<!--JS区域-->
<script>
    export default {
        name: "hw",
      data(){
          return {
            name:"毛没齐"
        }
      }
    }
</script>

<!--css区域-->
<style scoped>
.hw{
  color: blue;
}
</style>

サブコンポーネントを作成したら、登録する必要があります。登録後にのみ使用できます。 登録は

1. 部分的な登録コンポーネント: App.vue ファイルに登録し、App.vue でも使用します。

2.コンポーネントの全体登録: main.js ファイルでコンポーネントをグローバルに登録した後、App.vue ファイルで

を使用します:

Calendar_html/css_WEB-ITnose

Vue.js を使用する

Vue.js コンポーネントとは何ですか? Vue.jsコンポーネントの使い方まとめ

以上がVue.jsでのコンポーネントの作成と登録方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。