Vueノート-コンポーネント間のネスト

前に文章を書いたことがありますが、Vueの新旧バージョンの足場をインストールする方法を紹介しました.また、新旧バージョンの足場を使ってVueプロジェクトを迅速に作成する方法も紹介しました.興味のある学生はクリックして見ることができます.Vueノート--足場を構築し、Vueプロジェクトを迅速に作成します.今日の記事では、足場を使用して作成されたVueプロジェクトで、異なるコンポーネントがネストされているというもう一つの知識をまとめました.
一、基礎知識の紹介
まず、Vueプロジェクトについて簡単な紹介をします.Vueプロジェクトにはindexがあります.htmlファイルは、プロジェクトを起動すると、このファイルを開きます.index.htmlファイルとmain.jsが関連付けられているので、mainを解析します.jsの内容.
main.jsファイルは、Vueのエントリファイルです.ここでは、Vueのvue-routerコンポーネント、vue-resourceコンポーネント、Appルートコンポーネントなど、Vueの他のコンポーネントを導入できます.しかし、私たちが自分で書いたコンポーネントは、mainにはありません.jsファイルに導入されました.
Appルートコンポーネントの一般的な機能は、作成したコンポーネントを導入することです.つまり、作成したコンポーネントをAppルートコンポーネントにネストすることで、自分で作成したコンポーネントをプロジェクトに追加することができます.
二、コンポーネント間のネスト
次に、自分で作成したコンポーネントとルートコンポーネントのネストを例に説明します.他のコンポーネントのネスト方法は、この場合と同じです.
まず/src/componentsフォルダの下にfengという名前のコンポーネントを新規作成します.vue、コンポーネントの内容は次のとおりです.

  export default {
    name: 'feng',
    data() {
      return {
        user_name:"fengzhen"
      }
    }
  }

コンポーネントの作成後、まずルートコンポーネントでimportコマンドを使用してコンポーネントを導入し、componentsプロパティでコンポーネントをローカルに登録し、最後に