Vue でコンポーネントを分割する方法の詳細な紹介-フロントエンドQ&A-php.cn

Vue でコンポーネントを分割する方法の詳細な紹介

PHPz

リリース： 2023-04-13 09:39:35

オリジナル

1255 人が閲覧しました

フロントエンドテクノロジの継続的な開発により、Vue はますます注目を集め、フロントエンド開発において最も尊敬されるフレームワークの 1 つになりました。 Vue の効率性と仮想 DOM テクノロジにより、Vue は実際の開発で効果的に使用されます。 Vue の分割は、Vue のコンポーネント分割の非常に重要な部分です。この記事ではVueでコンポーネントを分割する方法を詳しく紹介します。

コンポーネントの基本概念

Vue では、コンポーネントはカスタム要素と同様に、再利用可能な Vue インスタンスを指します。コンポーネントはビュー上の props を受け入れて、要素の機能をカスタマイズできます。コンポーネントにはデータとメソッドが含まれており、ビュー全体の一部を表すことができます。たとえば、ショッピングカートコンポーネントは、アプリケーションビュー全体の一部を表すことができます。コンポーネントは親コンポーネントからデータを受信したり、親コンポーネントにデータを送信したりできます。

コンポーネントの分割方法

Vue では、コンポーネントはグローバルコンポーネントとローカルコンポーネントに分割できます。

グローバルコンポーネント

グローバルコンポーネントは、どこでも使用できるコンポーネントです。Vue のグローバル設定オブジェクトに登録されます。各 Vue インスタンスのスコープは、グローバルを含みます。コンポーネント。この種のコンポーネントの登録は、Vue.component() メソッドを通じて行われます。一般に、グローバルコンポーネントは、下部のナビゲーションバー、上部の検索ボックス、その他の共通コンポーネントなどのグローバル機能を定義するためにのみ使用されます。サンプルコードは以下のとおりです:

Vue.component('header-bar', {
  template: '<div>这是一个头部组件</div>'
})

ログイン後にコピー

ローカルコンポーネント

ローカルコンポーネントとは、特定のコンポーネント内でのみ使用できるコンポーネントであり、Vue インスタンスまたはコンポーネントインスタンス。このインスタンスのスコープ内でのみ使用できます。このようなコンポーネントは、コンポーネントオプションオブジェクトをローカルコンポーネントのオプションプロパティの 1 つとして渡すことによって登録されます。一般に、ローカルコンポーネントはページごとに独自のコンポーネントを定義できます。たとえば、ページで特定のコンポーネントが必要な場合、それをローカルコンポーネントとして定義できます。サンプルコードは以下の通りです:

var vm = new Vue({
  el: '#app',
  components: {
    'header-bar': {
      template: '<div>这是一个头部组件</div>'
    },
    'content-body': {
      template: '<div>这是一个内容组件</div>'
    }
  }
})

ログイン後にコピー

コンポーネントの値の受け渡し方法

コンポーネント間のやり取りやデータの受け渡しが発生します。コンポーネント内のさまざまな種類のデータ配信方法。

親コンポーネントから子コンポーネントへの値の受け渡し

親コンポーネントから子コンポーネントへの値の受け渡しは、データを子に渡す一方向のデータフローです。コンポーネントからプロップまで。 Vue では、子コンポーネントは独自の独立した props をプロパティとして宣言します。サンプルコードは次のとおりです。

親コンポーネント:

<template>
  <div>
    <h3>父组件</h3>
    <my-child :title="title" :content="content"></my-child>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        title: '这是标题',
        content: '这是内容'
      }
    }
  }
</script>

ログイン後にコピー

子コンポーネント:

<template>
  <div>
    <h3>子组件</h3>
    <p>{{title}}</p>
    <p>{{content}}</p>
  </div>
</template>
<script>
  export default {
    props: {
      title: {
        type: String
      },
      content: {
        type: String
      }
    }
  }
</script>

ログイン後にコピー

子コンポーネントは値を親コンポーネントに渡します

Child コンポーネントから親コンポーネントへの値の受け渡しは、カスタムイベントを介した子コンポーネントから親コンポーネントへの一方向のデータフローです。 Vue では、$emit() メソッドを使用してイベントとデータを親コンポーネントに渡します。サンプルコードは次のとおりです。

親コンポーネント:

<template>
  <div>
    <h3>父组件</h3>
    <my-child @child-click="childClickHandler"></my-child>
    <p>{{info}}</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        info: ''
      }
    },
    methods: {
      childClickHandler(val) {
        this.info = val
      }
    }
  }
</script>

ログイン後にコピー

子コンポーネント:

<template>
  <div>
    <h3>子组件</h3>
    <button @click="clickHandler">点击我</button>
  </div>
</template>
<script>
  export default {
    methods: {
      clickHandler() {
        this.$emit('child-click', '这是子组件的信息')
      }
    }
  }
</script>

ログイン後にコピー

要約

Vue でのコンポーネントベースの開発はプロジェクトにとって重要です開発、修正、メンテナンスは非常に良い役割を果たしました。実際の開発においては、必要に応じて合理的なコンポーネント分割とコンポーネント間のデータ転送を行うことが、良好な開発体験とコンポーネント化を実現する有効な手法となります。コンポーネント開発に Vue を使用すると、アプリケーション全体が再利用可能な小さな部分に分割され、効率と信頼性が高まります。

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