コンポーネントとは何ですか?
コンポーネントは Vue アプリケーションの小さなモジュールであり、再利用できるコードのブロックです。コンポーネントを使用すると、コードを小さな部分に分割し、それぞれが特定のタスク (レゴ ブロックの構築など) を担当できるため、大規模なアプリケーションの開発が容易になります。
コンポーネントの作成
Vue でコンポーネントを作成するには 2 つの方法があります。
- コンポーネントの登録
Vue.component() メソッドを使用して、グローバル コンポーネントを登録します。
Vue.component('my-component', {
// 组件选项
// ...
})
- ローカル コンポーネントを登録して
、Vue インスタンスにローカル コンポーネントを登録します。
new Vue({
el: '#app',
components: {
'my-component': MyComponent // 局部注册组件
}
})
コンポーネントの使用
テンプレートでのコンポーネントの使用:
<template>
<div>
<my-component></my-component>
</div>
</template>
コンポーネントのオプション
- テンプレート オプション
テンプレート: コンポーネントの HTML テンプレート。他のコンポーネントやディレクティブを含めることができます。グローバルに登録する場合、テンプレート オプションは使用できないことに注意してください。
<template>
<div>
<p>{
{ msg }}</p> // 其他Vue选项或计算属性可以在组件的模板中使用。这里还能包含其他组件！
</div>
</template>
- データ オプション
データ: コンポーネントのデータ オブジェクト。任意のデータを含めることができます。グローバルに登録する場合、data オプションは使用できないことに注意してください。
<script>
export default {
data() {
// 使用函数定义异步获取数据！这在加载大型数据集合时特别有用！)
}
- メソッド オプション
: コンポーネントのメソッド。コンポーネントのテンプレートで呼び出すことができます。グローバルに登録する場合、メソッド オプションは使用できません。
<script>
export default {
methods: {
greet() {
alert('Hello!')
}
}
}
</script>
- 計算されたプロパティ オプション
computed: コンポーネントの計算されたプロパティをコンポーネントのテンプレートで使用できます。グローバルに登録する場合、計算プロパティ オプションは使用できません。
<script>
export default {
data() {
return {
message: 'Hello'
}
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
}
</script>
- イベント オプション
events: コンポーネントがリッスンしてトリガーできるイベント。コンポーネントのテンプレートで使用できます。グローバルに登録する場合、イベント オプションは使用できません。
<script>
export default {
events: {
click: 'greet' // 监听 click 事件，并在事件触发时调用 greet 方法。
},
methods: {
greet() {
alert('Hello!')
}
}
}
</script>
- スタイル オプション
スタイル: コンポーネントのテンプレートで使用できるコンポーネントのスタイル。グローバルに登録する場合、スタイル オプションは使用できません。スタイルには、less や sass などの他の CSS モジュールを含めることができます。スタイル オプションでは、& 記号を使用してコンポーネントのデータ データを参照できます。例: color: &primaryColor;。
<script>
export default {
data() {
return {
primaryColor: 'blue'
}
},
styles: {
color: '&primaryColor' // 使用&来引用组件的数据对象中的primaryColor属性。
}
}
</script>
- ライフサイクル オプション
lifecycle: コンポーネントのライフサイクル フック関数。コンポーネントの作成、更新、破棄、およびその他の段階で呼び出すことができます。ライフサイクル オプションはグローバル登録では使用できません。一般的なライフサイクル フック関数の一部を次に示します: created(): コンポーネントが作成されるときに呼び出されます; Mounted(): コンポーネントが DOM にマウントされるときに呼び出されます; updated(): コンポーネントが更新されるときに呼び出されます; destroy():コンポーネントが破棄されたときに呼び出されます。これらのフック関数は関数オプションであり、計算されたプロパティやメソッドのオプションではないことに注意してください。以下に例を示します。
<script>
export default {
created() {
// 组件创建时调用。可以在这时初始化一些状态或执行一些操作。例如，初始化一个定时
},
mounted() {
// 组件挂载到DOM上时调用。可以在这时执行一些与DOM操作相关的操作。例如，获取组件的DOM元素。
this.$refs.myElement // 获取组件的引用，例如：this.$refs.myElement.style.color = 'red';
},
updated() {
// 组件更新时调用。可以在这时执行一些与数据更新相关的操作。例如，重新计算某个属性的值。
// ...
},
destroyed() {
// 组件销毁时调用。可以在这时执行一些清理操作。例如，取消定时器或解绑事件监听器。
// ...
}
</script>
}