vueでの構築メソッドの使い方-フロントエンドQ&A-php.cn

Vue は、Vue コンポーネントを含む多くの便利な機能を提供する人気のある JavaScript フレームワークです。 Vue コンポーネントを使用すると、アプリケーションを再利用可能な小さな部分に分割できます。この記事では、Vue コンポーネントの基本とその使用方法について説明します。

Vue コンポーネントの基本

Vue コンポーネントは Vue フレームワークの一部であり、アプリケーションの再利用可能な小さな部分を表すために使用されます。コンポーネントには HTML、CSS、JavaScript を含めることができ、アプリケーション内で複数回使用できます。これにより、アプリケーション全体を一緒にマッシュすることなく、各コンポーネントを独自のタスクに集中させることができるため、コンポーネントは大規模なアプリケーションを開発する場合に非常に便利になります。

Vue コンポーネントを作成するには、Vue.component() メソッドを使用できます。このメソッドには、コンポーネント名とコンポーネントオプションオブジェクトという 2 つのパラメータが必要です。コンポーネント名は小文字の文字列である必要があり、ハイフン、数字、文字のみを含めることができます。コンポーネントオプションオブジェクトには、コンポーネントの HTML コードを含むテンプレート要素が含まれている必要があります。

次は、簡単な Vue コンポーネントの例です:

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

ログイン後にコピー

アプリケーションでこのコンポーネントを使用するには、Vue インスタンスで参照します:

new Vue({
  el: '#app',
  template: '<my-component></my-component>'
});

ログイン後にコピー

この例では、私のコンポーネントを Vue インスタンスのテンプレートに追加します。これで、Vue インスタンスがインスタンス化されると、このコンポーネントがページ上に表示されます。

Vue コンポーネントの使用方法

Vue コンポーネントを使用するにはさまざまな方法があります。次のセクションでは、一般的に使用されるいくつかの方法を紹介します。

Props

コンポーネント間の通信は、Vue コンポーネントの重要な機能です。親コンポーネントが子コンポーネントにデータを渡す必要がある場合は、props 属性を使用できます。これは、子コンポーネントで props の配列を定義することによって行われます。

以下は、props 属性の使用方法を示すサブコンポーネントの例です:

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

new Vue({
  el: '#app',
  data: {
    parentMsg: '来自父亲的消息'
  }
});

ログイン後にコピー

この例では、「Message」という名前の props 属性を定義し、それをサブコンポーネントのテンプレートに追加します。で。親コンポーネントでは、parentMsg というデータオブジェクトを定義し、その値を「親からのメッセージ」に設定します。これで、親コンポーネント内で子コンポーネントを使用し、parentMsg をプロップとして渡すことができます。

<div id="app">
  <child-component :message="parentMsg"></child-component>
</div>

ログイン後にコピー

この例では、v-bind ディレクティブを使用して、parentMsg を子のメッセージプロパティとしてバインドしました。成分。これで、子コンポーネントは親コンポーネントからのメッセージを表示するようになります。

Emit

Emit を使用すると、子コンポーネントが親コンポーネントにデータを渡すことができます。子コンポーネントは、親コンポーネントでカスタムイベントをトリガーする特別な $emit メソッドを使用できます。

次の例は、emit を使用して子コンポーネントを実装し、データを親コンポーネントに渡す方法を示しています。

Vue.component('child-component', {
  template: '<button v-on:click="emitEvent">发送事件</button>',
  methods: {
    emitEvent: function() {
      this.$emit('my-event', '这是我的消息');
    }
  }
});

new Vue({
  el: '#app',
  data: {
    parentMsg: ''
  },
  methods: {
    handleEvent: function(msg) {
      this.parentMsg = msg;
    }
  }
});

ログイン後にコピー

この例では、子コンポーネントには、ボタンを押したときに $emit メソッドを使用して「my-event」イベントをトリガーします。親コンポーネントで、handleEvent というメソッドを定義し、それを「my-event」イベントにバインドします。コンポーネントがこのイベントをトリガーすると、handleEvent メソッドが呼び出され、子コンポーネントによって渡されたメッセージを受け取ります。

<div id="app">
  <child-component v-on:my-event="handleEvent"></child-component>
  <p>{{ parentMsg }}</p>
</div>

ログイン後にコピー

この例では、handleEvent メソッドを「my-event」イベントにバインドし、parentMsg の値をページに表示します。ここで、子コンポーネントがボタンをクリックして「my-event」イベントがトリガーされると、handleEvent メソッドが呼び出され、子コンポーネントによって渡されたメッセージがparentMsg 変数に格納されます。

スロット

スロットは、Vue コンポーネントのもう 1 つの重要な機能です。これにより、親コンポーネントが HTML コードを子コンポーネントに渡し、それを子コンポーネントのテンプレートに含めることができます。

次の例は、Slot 関数を使用して HTML コードを親コンポーネントから子コンポーネントに渡す方法を示しています:

Vue.component('child-component', {
  template: '<div><slot></slot></div>'
});

new Vue({
  el: '#app'
});

ログイン後にコピー

この例では、を使用します。子コンポーネントのテンプレート要素。この要素は、子コンポーネント内の対応する HTML コードを表示します。ここで、親コンポーネントでタグを使用し、そのタグに HTML コードを入力できます:

<div id="app">
  <child-component>
    <h1>这是一级标题</h1>
    <p>这是一段文本</p>
  </child-component>
</div>

ログイン後にコピー

この例では、親コンポーネントの HTML コードがテンプレートに含まれます。子コンポーネントの情報が取得され、ページに表示されます。

スコープ指定スロット

スコープ指定スロットは、HTML コードの代わりに子コンポーネントにデータを渡すことができる高度なスロット機能です。これは、さまざまなコンテキストでコンポーネントを再利用できるため、非常に便利です。

次の例は、スコープスロット機能を使用して親コンポーネントから子コンポーネントにデータを渡す方法を示しています:

Vue.component('child-component', {
  template: '<div><slot v-bind:user="user"></slot></div>',
  data: function() {
    return {
      user: {
        name: '张三',
        age: 20
      }
    }
  }
});

new Vue({
  el: '#app',
  methods: {
    getUser: function(name, age) {
      alert(name + ' ' + age);
    }
  }
});

ログイン後にコピー

この例では、を使用します。子コンポーネントの template. 要素を作成し、それにユーザーオブジェクトを渡します。親コンポーネントで getUser というメソッドを定義し、それを子コンポーネントの