Components は、構造化された保守可能な Web アプリケーションを構築できるようにする Vue.js の重要な概念です。 を使用すると components 、アプリケーションを小さな自己完結型の部分に分割し、それぞれがユーザー インターフェイスの特定の部分を担当することができます。
components この記事では、 Vue.js で 作成する方法、Vue.js を使用してコードを再利用する方法、および 間でデータを渡す方法について説明します components。 props 親コンポーネントから子コンポーネントにデータを渡すために 使用する方法と、子コンポーネントからその親コンポーネントにデータを戻すためにイベントを使用する方法について詳しく説明します。
1. 作成する Components
Components Vue.js では、`Vue.component` メソッドを使用するか、単一ファイルを定義することによって作成できます components 。
例：
// Global Component using Vue.component
Vue.component('my-component', {
// Component options
});
// Local Component using single-file component
// MyComponent.vue
<template>
<!-- Component template -->
</template>
<script>
export default {
// Component options
};
</script>
2. コンポーネントの構造
Vue コンポーネントは、テンプレート、スクリプト、およびオプションのスタイルで構成されます。 テンプレートには HTML マークアップが含まれ、スクリプトにはコンポーネント オプション(データ、メソッド、計算プロパティ、ライフサイクル フック) が含まれ、スタイルはコンポーネントの外観を定義します。
例：
<template>
<div>
<h1>{{ message }}</h1>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue!',
count: 0
};
},
methods: {
increment() {
this.count++;
}
}
};
</script>
<style scoped>
/* Component styles */
</style>
3. コンポーネントの再利用性
Components Vue.js ではアプリケーション全体で再利用できるため、コードの重複が減り、保守性が向上します。 これらはモジュール式のアプローチを促進し、小さなものを大きなものに組み立てることができます components。
例：
// ParentComponent.vue
<template>
<div>
<child-component></child-component>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
}
};
</script>
4. Props
Props components 親から子に データを渡すことができます components。 Props 子コンポーネントで宣言され、通常のデータ プロパティと同様に使用できます。
例：
// ParentComponent.vue
<template>
<div>
<child-component:message="parentMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: 'Hello from parent!'
};
}
};
</script>
// ChildComponent.vue
<template>
<div>
<h2>{{ message }}</h2>
</div>
</template>
<script>
export default {
props: ['message']
};
</script>
5. カスタムイベント
Components カスタム イベントを発行して親と通信できます components。 親は components これらのイベントを聞いて、それに応じて反応することができます。
例：
// ChildComponent.vue
<template>
<div>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
methods: {
increment() {
this.$emit('increment-event');
}
}
};
</script>
// ParentComponent.vue
<template>
<div>
<child-component @increment-event="handleIncrement"></child-component>
<p>Count: {{ count }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
count: 0
};
},
methods: {
handleIncrement() {
this.count++;
}
}
};
</script>
これらの例では、 Vue.js の主要な概念を紹介し components 、その柔軟性、再利用性、通信機能を示します。 Components モジュール式で保守可能なコードの作成に役立ち、Vue.js をスケーラブルなアプリケーションを構築するための強力なフレームワークにします。