溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“Vue父子組件之間事件通信怎么實現”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue父子組件之間事件通信怎么實現”文章吧。
使用父組件傳遞過來的值做一個計數組件的時候，使用v-bind的方式傳值，這個時候父子組件間是單向數據流的方式，即子組件無法修改父組件傳來的值，所以做計數器組件的時候，子組件只能是拷貝一份父組件傳來的值，然后做計數操作，本章我們提供事件的方式實現計數的功能，思想就是，我們修改不了父組件傳遞過來的值，我們就可以通過事件通知父組件修改這個值：代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>父子組件通過事件進行通信</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
count:1
}
},
methods:{
handleAddOne(){
this.count += 1;
}
},
template:
`
<div>
<counter :count = "count" @add-one="handleAddOne" />
</div>
`
});
app.component('counter',{
props:['count'],
emits:{
addOne:(count) =>{
if(count > 3){
alert(count);
return true;
}
return false;
}
},
methods: {
handleItemClick(){
this.$emit('addOne',this.count);
}
},
template:`<div @click="handleItemClick">{{count}}</div>`
});
const vm = app.mount('#root');
</script>
</html>當我們點擊顯示數字的div時，會執行執行handleItemClick方法，向父組件傳遞一個add-one事件，并且將目前的count值當成參數傳遞給父組件，父組件通過@add-one="handleAddOne"監聽add-one事件，當收到這個事件后，就執行handleAddOne方法，讓count的值加一，然后由于時count的值和子組件又是綁定的，所以這個值也會同步給子組件，這樣就會在子組件顯示count+1的值。
注意：監聽事件，使用“-” 分隔符：如本例中的：@add-one，向外部發送一個事件時用駝峰命名：如本例中的：this.$emit('addOne',this.count);
從代碼中我們可以看到從子組件向父組件傳遞一個事件使用的是$emit()方法，這個方法可以單獨傳事件如：this.$emit('addOne'); 也可以帶參數傳遞：this.$emit('addOne',2);
另外本例中，我們可以看到這樣一段代碼：
emits:{
addOne:(count) =>{
if(count > 3){
alert(count);
return true;
}
return false;
}
},其實這里是便于讓代碼的閱讀者能通過emmits關鍵字快速知道本組件會向外傳遞哪些事件，畢竟組件多了后，會有一堆事件，在代碼中一個個看的確比較費勁，這個模塊還有一個功能就是校驗我們可以在里面判斷父組件傳遞過來的值，然后做些想做的操作。
以上就是關于“Vue父子組件之間事件通信怎么實現”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
