Vue ドキュメント内のコンポーネントの参照とアクセス方法-Vue.js-php.cn

Vue ドキュメント内のコンポーネントの参照とアクセス方法

WBOY

リリース： 2023-06-20 08:58:35

オリジナル

1432 人が閲覧しました

Vue は、ユーザーインターフェイスの構築に使用できる JavaScript フレームワークです。 Vue の中核となるのはコンポーネントシステムです。これにより、UI を独立した再利用可能な部分に分割できます。この記事では、Vue ドキュメント内のコンポーネントの参照とアクセス方法を紹介します。

Vue コンポーネントは、独自のテンプレート、JavaScript ロジック、スタイルを持つ再利用可能なコードブロックです。 Vue コンポーネントはプロパティとイベントを受け入れ、ライフサイクルフックなどのオプションを提供できます。

Vue では、コンポーネントを作成する方法が 2 つあります: グローバル登録とローカル登録です。グローバル登録では、アプリケーション全体でコンポーネントを使用できますが、ローカル登録では、コンポーネントはその親コンポーネント内でのみ使用できます。

コンポーネントのグローバル登録:

Vue では、Vue.component() メソッドを使用してコンポーネントをグローバルに登録できます。このメソッドは、コンポーネント名とコンポーネントオプションオブジェクトの 2 つのパラメータを受け入れます。簡単な例を次に示します。

Vue.component('my-component', {
  template: '<div>这是我的组件</div>'
})

ログイン後にコピー

上記のコードは、「my-component」という名前のコンポーネントを定義し、そのテンプレートを指定します。これで、このコンポーネントはプロジェクト内の任意の Vue インスタンスで使用できるようになります。

コンポーネントのローカル登録:

Vue では、コンポーネントオプションを使用してコンポーネントをローカルに登録できます。このオプションは、Vue インスタンスまたはコンポーネントで定義されます。簡単な例を次に示します。

var vm = new Vue({
  el: '#app',
  components: {
    'my-component': {
      template: '<div>这是我的组件</div>'
    }
  }
})

ログイン後にコピー

上記のコードは、「my-component」という名前のコンポーネントを定義し、コンポーネントオプションを使用してそれを Vue インスタンスにローカルに登録します。コンポーネントは、Vue インスタンス (#app) のルート要素内でのみ使用できるようになりました。

コンポーネントのアクセスメソッド:

コンポーネントを使用するには、Vue インスタンスまたは別のコンポーネントのテンプレートでコンポーネントを参照する必要があります。テンプレートでは、コンポーネント名をカスタム要素のタグ名として使用できます。たとえば、「my-component」というコンポーネントがある場合、テンプレートで次のコードを使用できます。

<my-component></my-component>

ログイン後にコピー

Vue は、my-component をコンポーネントのテンプレートに自動的に置き換え、コンポーネントのオプションと属性を使用します。入力します。

コンポーネント内では、this.$parent または this.$root を使用して親 Vue インスタンスにアクセスできます。さらに、コンポーネントオプションでプロパティとイベントオプションを使用して、データとイベントを渡すことができます。

props オプションを使用すると、コンポーネントにデータを渡すことができます。コンポーネントでは、this.propName を通じてこれらのプロパティにアクセスできます。以下は簡単な例です:

Vue.component('my-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
})

ログイン後にコピー

この例では、「my-component」コンポーネントは文字列型のプロパティ「message」を定義します。コンポーネントでは、テンプレートバインディングを使用して、このプロパティをコンポーネントのテンプレートに挿入できます。

<my-component message="Hello World"></my-component>

ログイン後にコピー

この例では、コンポーネントのメッセージ属性として「Hello World」文字列を渡します。コンポーネント内で、Vue はこのプロパティを対応するテンプレートにバインドし、結果に表示します。

イベントオプションを使用すると、コンポーネントにイベントを送信できます。コンポーネントがイベントを起動すると、他のコンポーネントまたは Vue インスタンスがこれらのイベントをキャプチャし、それに応じて反応できます。以下は簡単な例です:

Vue.component('my-component', {
  template: '<button v-on:click="onClick">Click me</button>',
  methods: {
    onClick: function () {
      this.$emit('my-event')
    }
  }
})

var vm = new Vue({
  el: '#app',
  methods: {
    onMyEvent: function () {
      alert('My event was triggered in parent component')
    }
  }
})

ログイン後にコピー

この例では、「my-component」コンポーネントはクリックイベントを定義し、this.$emit() メソッドを使用して「my-event」という名前のイベントをトリガーします。イベント。次に、Vue インスタンスで v-on ディレクティブを使用してカスタムイベントをキャプチャし、コールバック関数をトリガーできます。

<my-component v-on:my-event="onMyEvent"></my-component>

ログイン後にコピー

この例では、「onMyEvent」というメソッド名を渡します。このメソッドは、コンポーネントが「my-event」イベントをトリガーするときに呼び出されます。

結論:

コンポーネントは Vue アプリケーションの中核部分の 1 つであり、再利用可能で拡張可能なユーザーインターフェイスを簡単に構築できます。 Vue ドキュメントでは、コンポーネントの参照およびアクセス方法には、グローバルおよびローカルの登録、props オプション、およびイベントオプションが含まれます。これらのテクノロジーを理解して習得すると、Vue アプリケーションの構築が容易になります。

以上がVue ドキュメント内のコンポーネントの参照とアクセス方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。