vueでの構築メソッドの使い方

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'
});

この例では、58cb293b8600657fad49ec2c8d37b472 を使用します。子コンポーネントのテンプレート要素。この要素は、子コンポーネント内の対応する HTML コードを表示します。ここで、親コンポーネントで 6520631531c208a38051e59cee36c278 タグを使用し、そのタグに 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);
    }
  }
});

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

<div id="app">
  <child-component>
    <template v-slot:default="slotProps">
      <button v-on:click="getUser(slotProps.user.name, slotProps.user.age)">获取用户信息</button>
    </template>
  </child-component>
</div>

この例では、v-slot ディレクティブを使用してユーザー データを子コンポーネントの d477f9ce7bf77f53fbcf36bec1b69b7a 要素にバインドし、ボタンで v-on ディレクティブと getUser メソッドを使用します。ここで、ボタンがクリックされると、親コンポーネントは getUser メソッドを呼び出し、子コンポーネントから渡されたユーザー データをパラメータとして渡します。

結論

Vue コンポーネントは、アプリケーションを再利用可能な小さな部分に分割できる非常に便利な機能です。この記事では、Vue コンポーネントの基本と、プロップ、エミット、スロット、スコープ スロットなどの一般的な使用方法を紹介します。これらの方法が、Vue コンポーネントの機能をより有効に活用し、アプリケーション開発の効率を向上させるのに役立つことを願っています。

以上がvueでの構築メソッドの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。