最簡(jiǎn)單的 Vue 組件是一個(gè) JavaScript 對(duì)象。這個(gè)對(duì)象必須至少包含一個(gè) template 屬性，用來(lái)定義組件的模板。模板中可以使用 Vue 自帶的模板語(yǔ)法或者 HTML，但是如果需要在組件和父組件之間實(shí)現(xiàn)通訊，就需要使用 vue-on 這個(gè)指令來(lái)綁定事件。
Vue.component('child-component', {
template: `{{ title }}
`,
data() {
return {
count: 0
}
},
computed: {
title() {
return `Count: ${this.count}`
}
},
methods: {
increaseCount() {
this.count++
this.$emit('count-increased', this.count)
}
}
});在上面的代碼中，我們創(chuàng)建了一個(gè)名為 child-component 的組件。這個(gè)組件內(nèi)部有一個(gè)計(jì)數(shù)器，每次點(diǎn)擊按鈕就會(huì)增加一次計(jì)數(shù)器。同時(shí)，組件還使用了 $emit 方法將計(jì)數(shù)器的值發(fā)送給父組件。$emit 方法是 Vue 的一個(gè)實(shí)例方法，它允許你將數(shù)據(jù)從子組件發(fā)送到父組件，以便子組件和父組件之間實(shí)現(xiàn)通訊。
在父組件中，我們可以通過(guò) v-on 指令來(lái)監(jiān)聽(tīng) $emit 事件并獲取子組件發(fā)送的數(shù)據(jù)：
<template>
<div>
<child-component @count-increased="handleCountIncreased"></child-component>
<p>Count in parent: {{ count }}</p>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
handleCountIncreased(count) {
this.count = count
}
}
}
</script>在上面的代碼中，我們使用了 v-on 指令來(lái)監(jiān)聽(tīng)子組件 $emit 的 count-increased 事件。當(dāng)事件觸發(fā)時(shí)，我們可以通過(guò) handleCountIncreased 方法獲取計(jì)數(shù)器的值并更新父組件中的數(shù)據(jù)。這樣就實(shí)現(xiàn)了子組件和父組件之間的通訊。
除了使用 $emit 方法和 v-on 指令，Vue 還提供了許多其他方法和指令來(lái)實(shí)現(xiàn)組件之間的通訊。比如 $refs 屬性、同一父組件內(nèi)組件的通訊、Vuex 狀態(tài)管理等等。了解這些方法和指令可以讓我們更好地理解和使用 Vue。