mixin、extend、component、その他の API を使用して Vue でコンポーネントのカスタマイズを実装する場合のヒント

Vue.js は、コンポーネントをカスタマイズするための多くの API を提供する人気のあるフロントエンド フレームワークです。この記事では、コンポーネントのカスタマイズのスキルを習得するのに役立つ、Vue の mixin、extend、コンポーネント、およびその他の API を紹介します。

mixin

Mixin は、Vue でコンポーネント コードを再利用する方法です。これにより、すでに記述されたコードを別のコンポーネントに再利用できるため、重複したコードを記述する必要性が減ります。たとえば、ミックスインを使用すると、同じライフサイクル フック関数を複数のコンポーネントに追加できます。

例:

// 定义一个 mixin 对象
var myMixin = {
  created: function () {
    console.log('Mixin created.');
  }
}

// 在多个组件中引入 mixin 对象
var app = new Vue({
  mixins: [myMixin],
  created: function () {
    console.log('App created.');
  }
})

var anotherComponent = new Vue({
  mixins: [myMixin],
  created: function () {
    console.log('Another component created.');
  }
})

上の例では、myMixin は作成されたフック関数を定義し、mixin オブジェクトは app コンポーネントと anotherComponent コンポーネントの両方で参照されます。ここで出力されるコンソール情報には、「Mixinが作成されました。」、「アプリが作成されました。」、「別のコンポーネントが作成されました。」が含まれます。

extend

extend は、コンポーネント テンプレートで新しいコンポーネントを定義するときに非常に役立つ Vue の API です。 extend を使用すると、コンポーネントを簡単に定義し、そのテンプレート、プロパティ、メソッドを使用できます。

例:

// 定义一个基础组件
var baseComponent = Vue.extend({
  template: '<div>{{ message }}</div>',
  data: function () {
    return {
      message: 'Hello, world!'
    }
  }
})

// 使用基础组件定义新组件
var newComponent = Vue.extend({
  mixins: [baseComponent],
  methods: {
    changeMessage: function () {
      this.message = 'Hi, Vue!';
    }
  }
})

// 创建新组件的实例并挂载到 DOM
var app = new newComponent().$mount('#app');

上の例では、baseComponent ベース コンポーネントを定義し、それを使用して新しいコンポーネント newComponent を定義します。 newComponent は、baseComponent のテンプレート、プロパティ、およびメソッドを使用し、メッセージ属性を「Hi, Vue!」に変更するために使用される新しいメソッド changeMes​​sage を定義します。

component

Component は、Vue でコンポーネントを定義する方法であり、オンデマンドでコンポーネントをページに読み込むことができます。 Vue のコンポーネント API は、次のようなコンポーネントを定義するさまざまな方法を提供します。

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

// 全局定义一个组件
Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  data: function () {
    return {
      message: 'Hello, world!'
    }
  }
})

// 在模板中引用组件
<div id="app">
  <my-component></my-component>
</div>

// 创建 Vue 实例
var app = new Vue({
  el: '#app'
})

上の例では、Vue.component API を使用して、my- という名前のコンポーネントをグローバルに定義します。コンポーネントのコンポーネントは、テンプレート内の message 属性を使用します。テンプレート内のコンポーネントを参照するときは、カスタム タグ b98f2d1b8b5d79f8c1b053de334aa7b5 を使用します。最後に、Vue インスタンスを作成し、ページにマウントします。

ローカル コンポーネント

// 局部定义一个组件
var myComponent = {
  template: '<div>{{ message }}</div>',
  data: function () {
    return {
      message: 'Hello, world!'
    }
  }
}

// 在模板中引用组件
<div id="app">
  <my-component></my-component>
</div>

// 创建 Vue 实例
var app = new Vue({
  el: '#app',
  components: {
    'my-component': myComponent
  }
})

上の例では、単純な JavaScript オブジェクトを使用してコンポーネント myComponent を定義します。 Vue インスタンスを作成するときは、コンポーネント オプションを使用してローカル コンポーネントとして登録します。見てわかるように、違いはコンポーネントの定義方法のみです。

概要

この記事では、コンポーネントのカスタマイズのスキルを習得するのに役立つ、Vue の mixin、extend、コンポーネントなどの API を紹介します。コンポーネント コードは mixin を通じて再利用できます。基本コンポーネントは extend を使用して作成でき、それらに基づいて新しいコンポーネントを定義できます。コンポーネントはコンポーネント定義のコア API であり、コンポーネントを定義するためのさまざまな柔軟な方法を提供します。この記事は、Vue.js をより良く使用するのに役立つと思います。

以上がmixin、extend、component、その他の API を使用して Vue でコンポーネントのカスタマイズを実装する場合のヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。