Vue是一套構建數據驅動的 Web 用戶界面的漸進式框架。其中最重要的功能之一就是比較方便的父子組件通信。Vue 的父子組件間通信主要是靠傳遞 prop 進行數據流動和通過 $emit 觸發事件,從而實現父組件向子組件傳遞數據或子組件向父組件觸發事件的目的。
$emit 是Vue中非常常用的一種事件傳遞方式,它可以讓子組件直接向父組件傳值。在子組件的某個操作上時,觸發一個事件,然后父組件監聽這個事件,從而產生相應的操作。
下面是一個 $emit 傳值的示例代碼:
子組件中:
<template>
<button @click="$emit('childClick', 123)">傳值給父組件</button>
</template>
<script>
export default {
name: 'Child',
}
</script>
父組件中:
<template>
<div>
<child @childClick="handleChildClick"></child>
<p v-if="message">{{message}}</p>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
name: 'Parent',
components: {
Child,
},
data() {
return {
message: ''
}
},
methods: {
handleChildClick(data) {
this.message = data
}
}
}
</script>
子組件中動態生成由 $emit 得到的數據,并將其傳遞到父組件中。父組件中給子組件一個 @childClick 事件監聽器,事件觸發后執行 handleChildClick 方法,利用傳入的參數 data 改變當前message值,并渲染值變化。
總結一下,通過使用 $emit 事件可以方便地進行父子組件間通信,可以通過事件來觸發相應的操作,從而實現組件間數據或事件的相互傳遞。
上一篇c json數據
下一篇c data 轉json